CODEWITHSUNDEEP
javascripthtmlmapboxmapbox-gl-js
lawal yemi
lawal yemi

Reputation: 176

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 coming 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='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/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.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/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.

Upvotes: 2

Views: 4991

Answers (2)

lawal yemi
lawal yemi

Reputation: 176

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.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/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.com/[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>

Upvotes: 3

AndrewHarvey
AndrewHarvey

Reputation: 3047

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.com/mapbox/mapbox-sdk-js#installation.

Upvotes: 4

Related Questions