Basic Map Controls

13 posts / 0 new
Last post
sahilsgandhi
Basic Map Controls

Hi,

I am trying to follow the instructions on this page - https://developer.mapquest.com/documentation/javascript-api/basic-map

to create a basic map. I am copying and pasting exactly the code on the site. The first section entitled 'Generating a Map' works perfectly.

The second section entitled 'Adding Basic Controls' does not work at all.

 

I am wondering... is it the MQA.withModule that's not working, and why? Like I say, my code is exactly the same as theirs...

Any help would be much appreciated.

 

Thanks.


MQBrianCoakley
The MapQuest JavaScript sdk
The MapQuest JavaScript sdk will be deprecated in the near future. We strongly recommend using Leaflet with the MapQuest Leaflet plugins for JavaScript maps.   If you with to continue with the MapQuest JavaScript sdk, can you post the code in your application with any error messages you're seeing?

sahilsgandhi
Thanks Brian. I am now using

Thanks Brian. I am now using the Leaflet plugins as you suggested, and so far so good. Everything is working for me.

Now I have a general question for you. I am trying to build a map that will perform batch geocoding of addresses, but each address is associated with data defined by me. For example, the name of a tenant, the sq. footage of a building, the price of the building, etc., etc. How do I do this? I read a little about the use of tables and the Search API. But correct me if I am wrong, the search api will not work with leaflet. So what is the right approach when using leaflet? Is there a tutorial or page link you can refer me to?

Thanks in advance.


MQBrianCoakley
You can use the search api
You can use the search api with Leaflet. You will use the data manager api to load the data which will automatically get geocoded. You can use the api directly or use this tool to create tables and manage data. Use the search api to search the data in the data manager table. Then use the lat/lngs from the search results to create markers on the Leaflet map with whatever data is needed in the popup. There is no search plugin or module but any browser can make a http request.

sahilsgandhi
Thanks Brian. I successfully

Thanks Brian. I successfully created a table and uploaded my data using the tool in your link. But after looking through the Search API I am still at a loss on where to start as far as modifying my code to search through that table. It would be really helpful to view some sample code. Could you please help me to find some sample code or perhaps existing applications using mapquest for which I can look at the html and use to start off? I've scoured google for sample code to no avail, and I feel I am so close to understanding but still so, so far away.

 

For what it's worth, here is my existing code. And I have created a table using your link. I need to modify this code to access my table. I need to map ALL records in the table, no exceptions. But I need to color the pins different colors based on whether the properties are owned, in process, or just being tracked. Thanks again for any help you can provide.

<!DOCTYPE html>
<html>
  <head>
    <title>Rich Uncles - Deal Tracking Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 50;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div id="info"></div>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <script src="http://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=REDACTED"></script>
    <script src="http://www.mapquestapi.com/sdk/leaflet/v2.s/mq-geocoding.js?key=REDACTED"></script>
    <script src="http://www.mapquestapi.com/search/v2/search-function-goes-here?key=REDACTED"></script>
    <script>

var mapLayer = MQ.mapLayer(), map;

var ownedIcon = L.icon(
{
    iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-purple.png',
    iconSize: [22, 28],
    iconAnchor: [11, 28],
    popupAnchor: [0, -22]
})

var processIcon = L.icon(
{
    iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-red_1.png',
    iconSize: [22, 28],
    iconAnchor: [11, 28],
    popupAnchor: [0, -22]
})

var trackingIcon = L.icon(
{
    iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-blue.png',
    iconSize: [22, 28],
    iconAnchor: [11, 28],
    popupAnchor: [0, -22]
})

MQ.geocode().search(
[
    { street: '16491 Lakeshore Dr', city: 'Lake Elsinore', state: 'CA', postalCode : '92530' },
    { city: 'flagstaff', state: 'az' },
    { city: 'denver', state: 'co' }
])
.on('success', function(e) {
  var results = e.result,
    html = '',
    group = [],
    features,
    marker,
    result,
    latlng,
    prop,
    best,
    val,
    map,
    r,
    i;

  map = L.map('map', {
    layers: mapLayer,
    center: [38.0000, -100.0000],
    maxBounds: [[22.0000, -50.0000], [55.0000, -150.0000]],
    minZoom: 5
  });

  L.control.layers({
    'Map': mapLayer,
    'Light': MQ.lightLayer(),
    'Satellite': MQ.satelliteLayer()
}).addTo(map);

  for (i = 0; i < results.length; i++) {
    result = results[i].best;
    latlng = result.latlng;

    html += '<div style="width:300px; float:left;">';
    html += '<p><strong>Geocoded Location #' + (i + 1) + '</strong></p>';

    for (prop in result)
    {
      r = result[prop];

      if (prop === 'displayLatLng')
      {
        val = r.lat + ', ' + r.lng;
      }
      else if (prop === 'mapUrl')
      {
        val = '<br /><img src="' + r + '" />';
      }
      else
      {
        val = r;
      }

      html += prop + ' : ' + val + '<br />';
    }

    html += '</div>';

    // create POI markers for each location
    marker = L.marker([ latlng.lat, latlng.lng ], {icon: processIcon})
      .bindPopup(result.street + ' ' + result.adminArea5 + ', ' + result.adminArea3);

    group.push(marker);
  }

  // add POI markers to the map and zoom to the features
  features = L.layerGroup(group).addTo(map);
  map.fitBounds(
      [
          [37.0000, -75.0000],
          [42.0000, -120.0000]
      ]
  );

  // show location information
  L.DomUtil.get('info').innerHTML = html;
});

    </script>

<script src="http://www.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=REDACTED></s...
  </body>
</html>


Balaji4008
Hi,

Hi,

How to enable(or add) a nearby services like Restaurants,Banks,ATM ..etc

Can you please help me 


MQBrianCoakley
The Sample Application here
The Sample Application here may be very close to what you're looking for.

MQBrianCoakley
Here is an example I did a
Here is an example I did a while back using jQuery. It's also using a search ahead function that has not been released yet for the search origin. But it shows how to make a search request and parse the results to put them on a map.

sahilsgandhi
A little additional help, please...

Thanks Brian. I've been staring at your code for a couple of days now trying to make sense of it. I'm lost on the $ signs and ajax functions...

I decided to go back to basics. Using the Data Manager, I have created a table of fields including two string fields with my proprietary data. I then have the searchAPI URL which calls that table and writes a function which contains my relevant data with the name 

renderBasicSearchNarrative()

Then I added the following function to my code:

function doHostedDataSearchClick() {
    searchType = "hosteddata";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = myURL;
    document.body.appendChild(script);
};

So I figure at this point, my relevant table data is basically accessible from my code (just a guess, I don't really know how to verify). I just need to figure out how to call the renderBasicSearchNarrative function and/or parse the data...

But I'm not that great at Javascript either so I'm not sure if I'm doing that right either... I tried the following in the body of my code:

renderBasicSearchNarrative({
    searchResults: 1
    });

 

This is basically where I'm still stuck... How do I parse this code and map it? Thanks for sending me your sample code, but I just haven't been able to follow it and make use of it. I would appreciate a few more nudges in the right direction. Thanks!


sahilsgandhi
Ah, I just realized a lot of

Ah, I just realized a lot of the reason I am struggling is due to my lack of familiarity with Javascript and JQuery. I am a Java programmer but have done very little in this web space.

After reading through some Javascript tutorials, I now understand that the renderBasicSearchNarrative function in the search API URL contains a JSON, and I need to work with that JSON to map my data. But I am confused by the renderBasicSearchNarrative function wrapping the JSON.

I tried the following code:

renderBasicSearchNarrative.searchResults[1].resultNumber

That didn't work. I apologize if this is really a javascript question as opposed to a mapquest API question.

 


MQBrianCoakley
Here is a REAL quick and
Here is a REAL quick and dirty sample of making a search request and parsing the response.                            function rendersearch(data) {                 if (data.searchResults && data.searchResults.length > 0) {                     for (x = 0; x < data.searchResults.length; x++){                         marker = L.marker([                             data.searchResults[x].shapePoints[0],                             data.searchResults[x].shapePoints[1]                         ]).bindPopup(data.searchResults[x].fields.property).addTo(map).openPopup();                     }                 }             }             function dosearch() {                 var script = document.createElement('script');                 script.type = 'text/javascript';                 script.src = 'http://www.mapquestapi.com/search/v2/radius' +                     '?key=' + Key +                     '&ambiguities=ignore' +                     '&origin=denver, co' +                     '&hostedData=mqap.' + Key + '_deals' +                     '&radius=10' +                     '&callback=rendersearch';                 document.body.appendChild(script);             }

sahilsgandhi
Thank you very much. Now,

Thank you very much. Now, when I call the renderSearch function above, what do I pass to it as the data parameter?


MQBrianCoakley
rendersearch is the callback
rendersearch is the callback function of the search request and will be called by the response. It should fire automatically. If not, you may have to use a XMLHttpRequest or use something like jQuery in the sample above - the one with all the $ (a jQuery thing).