-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #745 from akrherz/240423-2
Omnibus
- Loading branch information
Showing
10 changed files
with
157 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| // A factory to generate an OpenLayers map with a single marker on the page | ||
| // that is dragable, which then callbacks a given function with the lat/lon | ||
| // values of the marker. | ||
|
|
||
| function olSelectLonLat(div, initialLon, initialLat, callback) { | ||
|
|
||
| let marker = new ol.Feature({ | ||
| geometry: new ol.geom.Point(ol.proj.fromLonLat([initialLon, initialLat])) | ||
| }); | ||
| let style = new ol.style.Style({ | ||
| image: new ol.style.Icon({ | ||
| anchor: [0.5, 1], | ||
| src: '/images/marker.png', | ||
| }), | ||
| }); | ||
|
|
||
| // Set the style for the marker | ||
| marker.setStyle(style); | ||
|
|
||
| // Create a vector source and add the marker to it | ||
| let vectorSource = new ol.source.Vector({ | ||
| features: [marker] | ||
| }); | ||
|
|
||
| // Create a vector layer with the vector source and add it to the map | ||
| let vectorLayer = new ol.layer.Vector({ | ||
| source: vectorSource | ||
| }); | ||
|
|
||
| let map = new ol.Map({ | ||
| target: div, | ||
| layers: [ | ||
| new ol.layer.Tile({ | ||
| source: new ol.source.OSM() | ||
| }), | ||
| vectorLayer | ||
| ], | ||
| view: new ol.View({ | ||
| center: ol.proj.fromLonLat([initialLon, initialLat]), | ||
| zoom: 5 | ||
| }) | ||
| }); | ||
|
|
||
| let modify = new ol.interaction.Modify({ | ||
| hitDetection: vectorLayer, | ||
| source: vectorSource | ||
| }); | ||
| map.addInteraction(modify); | ||
|
|
||
| // Add a listener to the drag-and-drop interaction | ||
| modify.on('modifyend', (e) => { | ||
| let coords = e.features.getArray()[0].getGeometry().getCoordinates(); | ||
| let lonLat = ol.proj.toLonLat(coords); | ||
| try { | ||
| callback(lonLat[0], lonLat[1]); | ||
| } catch (e) { | ||
| console.log(e); | ||
| } | ||
| }); | ||
|
|
||
| return { map: map, marker: marker }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,13 @@ | ||
| /* global CONFIG */ | ||
|
|
||
| //callback on when the marker is done moving | ||
| function displayCoordinates(pnt) { | ||
| const lat = pnt.lat().toFixed(8); | ||
| const lng = pnt.lng().toFixed(8); | ||
| $("#newlat").val(lat); | ||
| $("#newlon").val(lng); | ||
| function displayCoordinates(lon, lat) { | ||
| $("#newlat").val(lat.toFixed(8)); | ||
| $("#newlon").val(lon.toFixed(8)); | ||
| } | ||
|
|
||
| // eslint-disable-next-line no-unused-vars | ||
| function load() { // skipcq: JS-0128 | ||
| const mapOptions = { | ||
| zoom: 15, | ||
| center: new google.maps.LatLng(CONFIG.lat, CONFIG.lon), | ||
| mapTypeId: google.maps.MapTypeId.ROADMAP | ||
| }; | ||
| const map = new google.maps.Map(document.getElementById('mymap'), | ||
| mapOptions); | ||
| const marker = new google.maps.Marker({ | ||
| position: mapOptions.center, | ||
| map, | ||
| draggable: true | ||
| }); | ||
| google.maps.event.addListener(marker, 'dragend', () => { | ||
| displayCoordinates(marker.getPosition()); | ||
| }); | ||
| } | ||
| $(document).ready(() => { | ||
| const res = olSelectLonLat("mymap", CONFIG.lon, CONFIG.lat, displayCoordinates); | ||
| // zoom in | ||
| res.map.getView().setZoom(14); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.