javascript - Using MapBox for Geolocation in html

I would like to display the address on dynamics CRM using MapBox API, i have used Google API and it works perfectly, but now i would like to display it using map box.

I have looked at the forward geo-location feature of Mapbox but it's not yet clear. So my variable my address variable will be ing from a field. e.g var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a geocoder</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='.43.0/mapbox-gl.js'></script>
    <link href='.43.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);

//map.addControl(new MapboxGeocoder({
 //   accessToken: mapboxgl.accessToken
//}));

</script>
</body>
</html>

I would like to display the address on dynamics CRM using MapBox API, i have used Google API and it works perfectly, but now i would like to display it using map box.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a geocoder</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox./mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox./mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox./mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox./mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);

//map.addControl(new MapboxGeocoder({
 //   accessToken: mapboxgl.accessToken
//}));

</script>
</body>
</html>

How can the address be displayed similar to that of google map on the Html Page.

Share Improve this question edited Dec 22, 2017 at 17:33 Sree 1,7581 gold badge19 silver badges29 bronze badges asked Dec 22, 2017 at 17:15 lawal yemi 1762 silver badges17 bronze badges

See details at stackoverflow./questions/38330100/… when encoding the URI ponent yields curl https://api.tiles.mapbox./geocoding/v5/mapbox.places/6%20Antares%20Drive%2C%20Ottawa%2C%20Ontario%20K2E%208A2%2CCanada.json?access_token=pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg – RobLabs Commented Dec 22, 2017 at 21:46
Thanks , but please it did not work for me. – lawal yemi Commented Dec 23, 2017 at 0:33
Thanks, but please it did not work. I have revised the html var test = "6 Anatares Drive, Ottawa , ON , K2E 6AE, Canada"; var address = encodeURI(test); var dataz= "api.mapbox./geocoding/v5/mapbox.places/…"" // After the map style has loaded on the page, add a source layer and default // styling for a single point. map.on('load', function() { map.addSource('single-point', { "type": "geojson", "data": dataz }); – lawal yemi Commented Dec 23, 2017 at 0:36

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

mapbox-gl-geocoder is a geocoder control for Mapbox GL JS, it's intended to provide a the user interface, that is, an input search box for searching on top of the Mapbox Geocoding API.

If you already have your query and just want to display that location on the map you're better to use the Mapbox JavaScript SDK with geocodeForward, see https://github./mapbox/mapbox-sdk-js#installation.

The Console.Log was very helpful, I found out that the data.features.center returns the coordinates which was all what i needed . the full code is below

<html>

<head>
  <script src='https://api.tiles.mapbox./mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox./mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>

</head>

<body style="word-wrap:break-word;">
  <div id='map'></div>
  <script src='https://unpkg./[email protected]/dist/mapbox-sdk.min.js'></script>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
    console.log(mapboxgl.accessToken);
    var client = new MapboxClient(mapboxgl.accessToken);
    console.log(client);

    var address = 't5h 0k7'
    var test = client.geocodeForward(address, function(err, data, res) {
      // data is the geocoding result as parsed JSON
      // res is the http response, including: status, headers and entity properties

      console.log(res);
      console.log(res.url);
      console.log(data);

      var coordinates = data.features[0].center;

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: coordinates,
        zoom: 14
      });
      new mapboxgl.Marker()
        .setLngLat(coordinates)
        .addTo(map);


    });
  </script>

</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using MapBox for Geolocation in html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)