--- /dev/null
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+ </head>
+ <body>
+
+ <form>
+ <div>
+ <h4 >Address 1:</h4>
+ <div >
+ <input type="text" id="addr2" name="addr2">
+ </div>
+ </div>
+ <div>
+ <h4 >Address 2:</h4>
+ <div >
+ <input type="text" id="addr2" name="addr2">
+ </div>
+ </div>
+ <div>
+ <h4 >City:</h4>
+ <div>
+ <input type="text" id="city" name="city">
+ </div>
+ </div>
+ <div>
+ <h4 >State:</h4>
+ <div >
+ <input type="text" id="state" name="state">
+ </div>
+ </div>
+ <div>
+ <h4 >Zip:</h4>
+ <div >
+ <input type="text" id="zip" name="zip">
+ </div>
+ </div>
+ <div>
+ <h4 >Country:</h4>
+ <div >
+ <input type="text" id="country" name="state">
+ </div>
+ </div>
+
+ <div>
+ <p>
+ Drag the pointer to the desired location for this member.
+ Use + and - buttons or the mouse wheel to zoom in or out.
+ Click and drag anywhere else on the map to move to another area.
+ </p>
+ <input type="submit" id="glm-estimate-location" value="Map Location Using Above Address">
+ </div>
+
+ <!-- Leaflet Map -->
+ <h2>Leaflet</h2>
+ <div id="LeafletMap" style="height:600px; width: 600px;"></div>
+
+ <div></div>
+ <h4>Specify Position Using Lattitude and Longitude:</h4>
+ Latitude <input id="glmLat" name="lat" type="text" value="45.3748">
+ Longitude <input id="glmLng" name="lon" type="text" value="-84.9594">
+ <p><input type="submit" id="latLonRecenter" value="Update pointer after entering new lat/lon postion."></p>
+ </div>
+
+ </form>
+
+ <script type="text/javascript">
+ jQuery(document).ready(function($) {
+
+ /*
+ * Map operations
+ */
+
+ var startLat = $('#glmLat').val();
+ var startLon = $('#glmLng').val();
+ var defZoom = Number(12);
+
+ /*
+ * Leaflet Map
+ * API reference: https://leafletjs.com/reference-1.3.2.html
+ */
+
+ function initMap() {
+
+ var leafletMap = L.map('LeafletMap').setView([startLat, startLon], defZoom);
+ //var leafletTileServer = 'https://maps.gaslightmedia.com' + '{z}/{x}/{y}.png';
+ var leafletTileServer = 'https://maps.gaslightmedia.com/08172018-1720ec4ae0a3dea9189ce9d87f6c69e2/' + '{z}/{x}/{y}.png';
+ var leafletMinZoom = 5;
+ var leafletMaxZoom = 18;
+ var geocoder;
+
+ // Tile server
+ L.tileLayer(leafletTileServer, {
+ attribution: 'Map data © <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.gaslightmedia.com/">Gaslight Media</a>',
+ minZoom: leafletMinZoom,
+ maxZoom: leafletMaxZoom,
+ id: 'nothot'
+ }).addTo(leafletMap);
+
+ // Marker
+ var leafletMarker = L.marker([startLat, startLon], {
+ draggable: true
+ }).addTo(leafletMap);
+
+ // Marker Drag/Drop action
+ leafletMarker.on('dragend', function(event){
+ var marker = event.target;
+ var position = marker.getLatLng();
+
+ marker.setLatLng(new L.LatLng(position.lat, position.lng),{ draggable:'true' });
+ leafletMap.panTo(new L.LatLng(position.lat, position.lng))
+
+ // Assign it to the lat/lon fields for submission
+ $('#glmLat').val(position.lat.toFixed(6));
+ $('#glmLng').val(position.lng.toFixed(6));
+ });
+
+ /*
+ * Use OpenStreetMaps Nominatim for Geolocation
+ */
+ var nominatimAPI = "https://nominatim.openstreetmap.org/search/";
+ $(document).on('click','#glm-estimate-location', function() {
+
+ var street = $('#addr1').val() + ' ' + $('#addr2').val();
+ var city = $('#city').val();
+ var state = $('#state').val();
+ var country = $('#country').val();
+ var zip = $('#zip').val();
+
+ var location = $.getJSON( nominatimAPI, {
+ format: 'json',
+ street: street,
+ city: city,
+ state: state,
+ country: country,
+ postalcode: zip
+ })
+ .fail(function(data) {
+ alert('Sorry, we were unable to get a location from the above address.');
+ })
+ .done(function( data ) {
+
+ if( !data[0] || !data[0].lat || !data[0].lon ) {
+ alert('Sorry, we were unable to get a location from the above address.');
+ } else {
+
+ // Assign the new position to the hidden fields for submission
+ glmLat = Number(data[0].lat);
+ glmLng = Number(data[0].lon);
+ $('#glmLat').val(glmLat.toFixed(6));
+ $('#glmLng').val(glmLng.toFixed(6));
+
+ // Move map pointer to the proper location
+ leafletMarker.setLatLng(new L.LatLng(glmLat, glmLng),{ draggable:'true' });
+ leafletMap.panTo(new L.LatLng(glmLat, glmLng));
+
+ }
+
+ });
+
+ return false;
+
+ });
+
+ // Recenter when Update Poineter after entering Lat/Lon is clicked
+ $(document).on('click','#latLonRecenter', function() {
+ var glmLat = $('#glmLat').val();
+ var glmLng = $('#glmLng').val();
+ leafletMarker.setLatLng(new L.LatLng(glmLat, glmLng),{ draggable:'true' });
+ leafletMap.panTo(new L.LatLng(glmLat, glmLng));
+ return false;
+ });
+
+ }
+
+ initMap();
+
+
+ });
+ </script>
+
+
+ </body>
+</html>
--- /dev/null
+<html>
+ <head>
+ <meta charset="utf-8" />
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+
+ <style>
+ .leaflet-tooltip {
+ background-color: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ font: 30px arial bold, sans-serif;
+ }
+ .leaflet-icon-invisible {
+
+ }
+ </style>
+
+ </head>
+ <body>
+
+ <!-- Leaflet Map -->
+
+ <h2>Markers as Text</h2>
+ <p>The "Petoskey" city name is a marker and can be clicked.
+ <div id="LeafletMap" style="height: 300px; width: 300px;"></div>
+
+ <script>
+
+ // Map with starting location and default zoom
+ var mymap = L.map('LeafletMap').setView([45.3748, -84.9594], 12);
+
+ // Tile server
+ L.tileLayer('https://maps.gaslightmedia.com/08172018-7c3a5c166644aa4b8dd6ad2ba7148015/{z}/{x}/{y}.png', {
+ attribution: 'Map data © <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.gaslightmedia.com/">Gaslight Media</a>',
+ maxZoom: 18,
+ id: 'nothot'
+ }).addTo(mymap);
+
+ /*
+ * Make marker invisible but a clickable area associated with the tooltip text
+ * Uses styles in head
+ */
+
+ // Marker
+ var marker = L.marker([45.3748, -84.9594], {
+
+ // Make icon invisible and set size so the clickable area is reasonable
+ icon: L.divIcon({
+ className: 'leaflet-icon-invisible',
+ iconSize: [100, 40], // Clickable area horiz, vertical
+ iconAnchor: [50, 20] // Make these .5 times the icon size settings (center)
+ })
+
+ })
+
+ // Make tooltip for the names and center them on the marker
+ .bindTooltip("Petoskey",
+ {
+ permanent: true,
+ direction: 'center',
+ offset: [0,0]
+ }
+ )
+ .addTo(mymap);
+
+ // Marker pop-up
+
+ marker.bindPopup("<b>You clicked <b>Petoskey</b>.");
+ marker.on('click', function() {
+ marker.bindPopup().openPopup();
+ });
+
+
+ </script>
+
+ </body>
+</html>
projects / prog / leaflet-demos.git / commitdiff