Update Control.Geocoder.js

OrdnanceSurvey · Mar 18, 2024 · f51fcd8 · f51fcd8
1 parent f93d2a0
commit f51fcd8
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 70 deletions.
diff --git a/Control.Geocoder.js b/Control.Geocoder.js
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ For example, to query the closest Named Road with 500m of the clicked map point
 
 ### Demo
 
-https://labs.os.uk/public/os-api-resources/leaflet-control-geocoder/os-names-api.html
+https://labs.os.uk/public/os-api-resources/code-playground/leaflet-control-geocoder/os-names-api
 
 ## OS Places API
 
@@ -82,4 +82,6 @@ For example, to query the `postcode` resource for both DPA and LPI addresses whe
 
 ### Demo
 
-https://labs.os.uk/public/os-api-resources/leaflet-control-geocoder/os-places-api.html
+NOTE: This example requires a valid API key. If you have not already done so, [please sign up to the Data Hub and acquire a project API key](https://osdatahub.os.uk/) before continuing.
+
+https://labs.os.uk/public/os-api-resources/code-playground/leaflet-control-geocoder/os-places-api
diff --git a/examples/os-names-api.html b/examples/os-names-api.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leaflet Control Geocoder | OS Names API</title>
-    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/leaflet-control-geocoder@latest/Control.Geocoder.min.css" />
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -31,57 +31,57 @@
 
 <div id="map"></div>
 
-<script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.0/proj4.js"></script>
-<script src="../Control.Geocoder.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.0/proj4.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/leaflet-control-geocoder@latest/Control.Geocoder.min.js"></script>
 <script>
 
-    var apiKey = 'INSERT_API_KEY_HERE';
+    const apiKey = 'INSERT_API_KEY_HERE';
 
     // Define the EPSG:27700 (British National Grid) projection.
     proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');
 
     // Initialize the map.
-    var mapOptions = {
+    const mapOptions = {
         minZoom: 7,
         maxZoom: 16,
+        center: [ 52.567, -1.485 ],
+        zoom: 8,
         maxBounds: [
             [ 49.528423, -10.76418 ],
             [ 61.331151, 1.9134116 ]
         ],
-        center: [ 52.567, -1.485 ],
-        zoom: 8,
         attributionControl: false
     };
 
-    var map = L.map('map', mapOptions);
+    const map = L.map('map', mapOptions);
 
     // Load and display OS Maps API XZY tile layer on the map.
-    var basemap = L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png?key=' + apiKey).addTo(map);
+    const basemap = L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png?key=' + apiKey, {
+        maxZoom: 20
+    }).addTo(map);
 
-    // Transform coordinates.
-    var transformCoords = function(arr) {
-        return L.latLng(proj4('EPSG:27700', 'EPSG:4326', arr).reverse());
-    };
+    // Add marker to the map.
+    const marker = L.marker([ 0, 0 ], { draggable: 'true' }).bindPopup().addTo(map);
 
     // Add geocoder control to the map.
-    var control = L.Control.geocoder({
+    const control = L.Control.geocoder({
         geocoder: new L.Control.Geocoder.osNamesAPI(apiKey),
         defaultMarkGeocode: false
     })
     .on('markgeocode', function(e) {
-        var geocode = e.geocode;
+        const geocode = e.geocode;
 
-        var center = transformCoords([ geocode.center.ea, geocode.center.no ]);
+        const center = transformCoords([ geocode.center.ea, geocode.center.no ]);
         geocode.center = center;
 
         displayMarkGeocode(geocode);
 
         if( geocode.bbox ) {
-            var projectedCoordsSW = transformCoords([ geocode.bbox._southWest.ea, geocode.bbox._southWest.no ]);
-            var projectedCoordsNE = transformCoords([ geocode.bbox._northEast.ea, geocode.bbox._northEast.no ]);
-            var bbox = L.latLngBounds(projectedCoordsSW, projectedCoordsNE);
+            const projectedCoordsSW = transformCoords([ geocode.bbox._southWest.ea, geocode.bbox._southWest.no ]);
+            const projectedCoordsNE = transformCoords([ geocode.bbox._northEast.ea, geocode.bbox._northEast.no ]);
+            const bbox = L.latLngBounds(projectedCoordsSW, projectedCoordsNE);
             map.fitBounds(bbox);
         }
         else {
@@ -90,22 +90,31 @@
     })
     .addTo(map);
 
-    var marker;
-
-    // Click event for reverse geocode.
+    // Map click event for reverse geocode.
     map.on('click', function(e) {
         ctrlReverseGeocode(e.latlng);
     });
 
+    // Marker dragend event for reverse geocode.
+    marker.on('dragend', function(e) {
+        ctrlReverseGeocode(e.target.getLatLng());
+    });
+
+    // Transform coordinates.
+    function transformCoords(arr) {
+        return L.latLng(proj4('EPSG:27700', 'EPSG:4326', arr).reverse());
+    };
+
+    // Reverse geocode function.
     function ctrlReverseGeocode(pos) {
-        var coords = proj4('EPSG:27700', [ pos.lng, pos.lat ]).map(function(elem) {
+        const coords = proj4('EPSG:27700', [ pos.lng, pos.lat ]).map(function(elem) {
             return Number(elem.toFixed(2));
         });
 
         control.options.geocoder.reverse(coords, map.options.crs.scale(map.getZoom()), function(results) {
-            var result = results[0];
+            let result = results[0];
             if( result ) {
-                var center = transformCoords([ result.center.ea, result.center.no ]);
+                const center = transformCoords([ result.center.ea, result.center.no ]);
                 result.center = center;
             }
             else {
@@ -116,18 +125,10 @@
         });
     }
 
+    // Display marker geocode popup information.
     function displayMarkGeocode(res) {
         console.log(res);
-        if( marker ) {
-            marker.setLatLng(res.center).setPopupContent(res.html || res.name).openPopup();
-        }
-        else {
-            marker = L.marker(res.center, { draggable: 'true' }).bindPopup(res.html || res.name).addTo(map).openPopup();
-            // Marker dragend event for reverse geocode.
-            marker.on('dragend', function(e) {
-                ctrlReverseGeocode(e.target.getLatLng());
-            });
-        }
+        marker.setLatLng(res.center).setPopupContent(res.html || res.name).openPopup();
     }
 
 </script>

diff --git a/examples/os-places-api.html b/examples/os-places-api.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leaflet Control Geocoder | OS Places API</title>
-    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/leaflet-control-geocoder@latest/Control.Geocoder.min.css" />
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -31,72 +31,73 @@
 
 <div id="map"></div>
 
-<script src="https://labs.os.uk/public/os-api-branding/v0.3.1/os-api-branding.js"></script>
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-<script src="../Control.Geocoder.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/os-api-branding@0.3.1/os-api-branding.js"></script>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/OrdnanceSurvey/leaflet-control-geocoder@latest/Control.Geocoder.min.js"></script>
 <script>
 
-    var apiKey = 'INSERT_API_KEY_HERE';
+    const apiKey = 'INSERT_API_KEY_HERE';
 
     // Initialize the map.
-    var mapOptions = {
+    const mapOptions = {
         minZoom: 7,
         maxZoom: 18,
+        center: [ 52.567, -1.485 ],
+        zoom: 8,
         maxBounds: [
             [ 49.528423, -10.76418 ],
             [ 61.331151, 1.9134116 ]
         ],
-        center: [ 52.567, -1.485 ],
-        zoom: 8,
         attributionControl: false
     };
 
-    var map = L.map('map', mapOptions);
+    const map = L.map('map', mapOptions);
 
     // Load and display OS Maps API XZY tile layer on the map.
-    var basemap = L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png?key=' + apiKey).addTo(map);
+    const basemap = L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Outdoor_3857/{z}/{x}/{y}.png?key=' + apiKey, {
+        maxZoom: 20
+    }).addTo(map);
+
+    // Add marker to the map.
+    const marker = L.marker([ 0, 0 ], { draggable: 'true' }).bindPopup().addTo(map);
 
     // Add geocoder control to the map.
-    var control = L.Control.geocoder({
+    const control = L.Control.geocoder({
         geocoder: new L.Control.Geocoder.osPlacesAPI(apiKey),
         defaultMarkGeocode: false
     })
     .on('markgeocode', function(e) {
-        var geocode = e.geocode;
+        const geocode = e.geocode;
         displayMarkGeocode(geocode);
         map.fitBounds(geocode.bbox);
     })
     .addTo(map);
 
-    var marker;
-
-    // Click event for reverse geocode.
+    // Map click event for reverse geocode.
     map.on('click', function(e) {
         ctrlReverseGeocode(e.latlng);
     });
 
+    // Marker dragend event for reverse geocode.
+    marker.on('dragend', function(e) {
+        ctrlReverseGeocode(e.target.getLatLng());
+    });
+
+    // Reverse geocode function.
     function ctrlReverseGeocode(pos) {
         control.options.geocoder.reverse(pos, map.options.crs.scale(map.getZoom()), function(results) {
-            var result = results[0];
+            let result = results[0];
             if(! result ) {
                 result = { center: pos, name: 'Nothing found' };
             }
             displayMarkGeocode(result);
         });
     }
 
+    // Display marker geocode popup information.
     function displayMarkGeocode(res) {
         console.log(res);
-        if( marker ) {
-            marker.setLatLng(res.center).setPopupContent(res.html || res.name).openPopup();
-        }
-        else {
-            marker = L.marker(res.center, { draggable: 'true' }).bindPopup(res.html || res.name).addTo(map).openPopup();
-            // Marker dragend event for reverse geocode.
-            marker.on('dragend', function(e) {
-                ctrlReverseGeocode(e.target.getLatLng());
-            });
-        }
+        marker.setLatLng(res.center).setPopupContent(res.html || res.name).openPopup();
     }
 
 </script>