algolia places + leaflet + mapbox

algolia-places-leaflet-mapbox.markdown

algolia places + leaflet + mapbox

A Pen by Dody Rachmat Wicaksono on CodePen.

License.

index.html

<div id='map' style='height: 300px;'></div>
<input type="search" id="ncmappicker_address" placeholder="Address" />

<table width="500" border="0">
    <tr>
        <td>Latitude, Longitude</td>
        <td>Latitude</td>
        <td>Longitude</td>
    </tr>
    <tr>
        <td>
            <input class="widefat" type="text" name="ncmappicker_latlng" id="ncmappicker_latlng" value="" />
        </td>
        <td>
            <input class="widefat" type="text" name="ncmappicker_latitude" id="ncmappicker_latitude" value="" />
        </td>
        <td>
            <input class="widefat" type="text" name="ncmappicker_longitude" id="ncmappicker_longitude" value="" />
        </td>
    </tr>
</table>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src='https://unpkg.com/[email protected]/dist/leaflet.js'></script>

<script>
var algoliaPlacesAppId = 'plQUH424RWO8';
var algoliaPlacesApiKey = '8068dfd06527dacd10e9525d42aa54da';
var mapboxToken = 'pk.eyJ1IjoiZG9keXJ3IiwiYSI6ImNrMHVlaTFzeDBuM3MzYmx3N2s4N2wzaWkifQ.T8gJrm2fTbTS9npDx0byCg';

var startLat = -7.24597;
var startLng = 112.738;
var zoom = 18;

var placesAutocomplete = places({
    appId: algoliaPlacesAppId,
    apiKey: algoliaPlacesApiKey,
    container: document.querySelector('#ncmappicker_address')
});

placesAutocomplete.on('change', function(e) {
    mymap.setView([e.suggestion.latlng.lat, e.suggestion.latlng.lng], zoom);
    marker.setLatLng(L.latLng(e.suggestion.latlng.lat, e.suggestion.latlng.lng));

    document.getElementById("ncmappicker_address").value = e.suggestion.value;
    fillLatLng(e.suggestion.latlng.lat, e.suggestion.latlng.lng);
});

var mymap = L.map('map').setView([startLat, startLng], zoom);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 15,
    id: 'mapbox.streets',
    accessToken: mapboxToken
}).addTo(mymap);

var marker = L.marker([startLat, startLng], {
    'draggable': true
}).addTo(mymap);


mymap.on('click', function(e) {
    var position = e.latlng;
    marker.setLatLng(position);
    mymap.panTo(position);

    fillLatLng(position.lat, position.lng);
});

marker.on('dragend', function(e) {
    var position = marker.getLatLng();
    marker.setLatLng(position, {
        draggable: 'true'
    });
    mymap.panTo(position);

    fillLatLng(position.lat, position.lng);
});

function fillLatLng(lat, lng) {
    document.getElementById("ncmappicker_latitude").value = lat.toString();
    document.getElementById("ncmappicker_longitude").value = lng.toString();
    document.getElementById("ncmappicker_latlng").value = lat.toString() + ',' + lng.toString();
}
</script>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

styles

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />