asked on

jQuery Mobile and OSM API Map - How do integrate the JSON reply

I am developing my first application with Apache Cordova and I need some assistanstance with the Open Street Map object. I am sending a request to the Open Street Map to get Lat/Lng of a location. I chose Manchester UK and I received the following JSON back:

In order to do this, I set to share a taxi (it's a taxi sharing app) first and then I click on Update Map.
This is the code for UpdateMap:

     function updateMap(address){
        var onSuccess = function(position) {
          var div = document.getElementById("map_canvas");
          div.width = window.innerWidth - 20;
          div.height = window.innerHeight * 0.8 - 40;
          // change the zoomin level
          map.setZoom(15);
          if (address != undefined) {
            // TODO 2(a) FR2.2
            var endPoint = "https://nominatim.openstreetmap.org/search/" + address + "?format=json&countrycode=gb"
            $.get(endPoint,function(e) {[embed=file 1418190][embed=file 1418191][embed=file 1418192]
              var location = e;
              map.setCenter({
                lng: location.lng,
                lat: location.lat
              });
            })


          } else {
            map.setCenter({
              lng: position.coords.longitude,
              lat: position.coords.latitude
            });
          }
        };
        var onError = function(error) {
          alert(
            "code: " + error.code + "\n" + "message: " + error.message + "\n"
          );
        };
        navigator.geolocation.getCurrentPosition(onSuccess, onError, {
          enableHighAccuracy: true
        });
      }

Open in new window

What do I need to do, in order to update the map?
index.html
index.js
www-cordova.zip

Molnár István

If I understand correctly, you have problems updating the map after pressing the "update map" button.

Option 1: you can check: if a previous map element exists, than delete it and create a new

if (map != undefined) 
{ 
                   map.off();
                   map.remove(); 
}

Open in new window

Option 2: if the map element exists, set it to null and create a new

if (map != undefined) 
{ 
                   map=null;
}

Open in new window

if (map != null) 
{ 
                   map=null;
}

Open in new window

Option 3: create a function

HTML:
<div id="weathermap"></div>

JAVASCRIPT:
function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}
USING:
document.getElementById('weathermap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";

Open in new window