<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Create a draggable Marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
mapboxgl.accessToken = 'mytkn';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0, 0],
zoom: 2
});
var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([0, 0])
.addTo(map);
function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML =
'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}
marker.on('dragend', onDragEnd);
</script>
<div>
<form>
<input type="text" name="lat">
<input type="text" name="long">
</form>
</div>
</body>
</html>
So I have part of code that makes draggable markers, so I can get users lat and long. Now I want that data in form so I can pass it to node.js backend (into database). How can I save that (pass) coordinates to form?
How about calling your node.js backend's API endpoint by using fetch API in onDragEnd?
Related
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"type="text/javascript" charset="utf-8"></script>
</head>
<body style='margin: 0'>
<div style="width: 100%; height: 100%" id="mapContainer"></div>
<script>
var platform = new H.service.Platform({
'apikey': 'YOUR API KEY'
});
const lat = 22.719568;
const long = 75.857727;
var maptypes = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.vector.normal.map,
{
zoom: 10,
center: { lat: lat, lng: long }
});
var marker = new H.map.Marker({ lat: lat, lng: long });
map.addObject(marker);
</script>
</body>
</html>
this is my code so far but when i run it the code does not show the map in detail
i want it to display the original map (this is the link https://map.missionuplink.org/)
About 3 weeks ago the arcgis Dynamic service is no longer visible on the google map. At the beginning I thought that something went wrong with my code, but after executing a sample code that does the same with the same result, I realized that something else went wrong.
The following code was taken from "ArcGIS Server Link for Google Maps API V3: Examples". It is basically loading an ESRI sample dynamic service.
When I load a Dynamic service from my arcgis server, the service is loaded but its not visible on the google map. (I know that because when I click on the map I get the property window of the feature from the Dynamic service although it is not visible).
If you run the following code you will not be able to see the esri dynamic service:
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer][1]'.
My question is what went wrong here?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dynamic Map Service Overlay</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src="dynamap.js">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
//dynamap.js
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(40, -100),//35.23, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true //my favorite feature in V3!
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS/
rest/services/Demographics/ESRI_C
ensus_USA/MapServer';
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS
/rest/services/Demographics/ESRI_Census_USA/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
window.onload = init;
I have a simple openlayer programm to add circle on mouse click. But for new circle it will remove last ones.I am giving jsfiddel link. kindly update it if you can help. further code is also here .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="http://openlayers.org/en/v3.16.0/css/ol.css">
<style type="text/css">
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
function updateIcon(f) {
vector.drawFeature(f);
}
options = {
div: "map",
zoom: 2,
center: [0, 0],
layers: [
new OpenLayers.Layer.OSM()
]
};
map = new OpenLayers.Map(options);
vector = new OpenLayers.Layer.Vector();
map.addLayer(vector);
var point1 = new OpenLayers.Geometry.Point(0, 0);
var point2 = new OpenLayers.Geometry.Point(5000000, 1000000);
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
var radius = $("#amount").val();
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2, radius, 20, 0);
var featurecircle = new OpenLayers.Feature.Vector(mycircle);
///vector.addFeatures([featurecircle]);
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
console.log(map)
console.log(e)
var lonlat = map.getLonLatFromPixel(e.xy);
var newPoint = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
vector.removeFeatures([featurecircle]);
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(
newPoint,
radius,
40,
0
);
featurecircle = new OpenLayers.Feature.Vector(mycircle);
vector.addFeatures([featurecircle]);
}
});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}); //]]>
</script>
</head>
<body>
<p>
<input type="text" id="amount" value="1000000" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<div id="map" style="width:600px;height:600px;"></div>
</body>
</html>
http://jsfiddle.net/zLjae81b/30/
Why don't you want to remove while removing it yourself?
Just remove the removing code (line 108):
vector.removeFeatures([featurecircle]);
The following code adds four markers to the map. Number of markers may be more than four. How can I play a beep sound after displaying each and every marker in the map? And, is it possible to increase or decrease the volume of the beep depending upon some value ?
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var planes = [
["Marker1",-40.99497,174.50808],
["Marker2",-41.30269,173.63696],
["Marker3",-41.49413,173.5421],
["Marker4",-41.51285,173.63274]
];
var map = L.map('map').setView([-41.3058, 174.82082], 8);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
iconSize: [25, 25]
});
function beep() {
var snd = new
snd.play();
}
for (var i = 0; i < planes.length; i++) {
marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})
.bindPopup(planes[i][0])
.addTo(map);
.beep();
}
</script>
</body>
</html>
After suggestions from colleagues, I tried this way and it works. Thanks to all.
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var planes = [
["Marker1",-40.99497,174.50808],
["Marker2",-41.30269,173.63696],
["Marker3",-41.49413,173.5421],
["Marker4",-41.51285,173.63274]
];
var map = L.map('map').setView([-41.3058, 174.82082], 8);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
iconSize: [25, 25]
});
</script>
<audio id="audio" src="D:\check\beep.mp3" autostart="false" ></audio>
<script>
function PlaySound() {
var sound = document.getElementById("audio");
sound.play()
}
</script>
<script>
for (var i = 0; i < planes.length; i++) {
marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})
.bindPopup(planes[i][0])
.addTo(map);
PlaySound();
}
</script>
</body>
</html>
I have this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="author" content="Salvatore Mazzarino" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- jquery mobile scripts -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile- 1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- my own style sheet -->
<link rel="stylesheet" href="./assets/css/style.css" type="text/css" />
<!-- google maps api script -->
<script type="text/javascript" src="./includes/js_map.js"></script>
<script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>
<body>
<div data-role = "page" id = "map-page">
<div data-role = "header">
<h1>Your position</h1>
</div>
<div data-role = "content" id = "map-canvas">
<!-- here the map -->
</div>
</div>
</body>
</html>
and this js file :
$( "#map-page" ).live( "pageinit", function()
{
// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show coordinates on map
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail()
{
drawMap(defaultLatLng); // Show default map
}
// Find users current position
navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});
}
else
{
drawMap(defaultLatLng); // No geolocation support
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}
});
I'm trying to obtain my position.in the html page a mas should appears but nothing apper neither the default map. why? any idea?
Without seeing your live code, it's hard to see if any of the CSS might be causing display issues. However, there are at least two things that need to be fixed:
Your call to the Google Maps API needs to be moved above your own JS file (in the head of the document).
You have an error in your URL that references the Maps API JS file. Change it from:
http://maps.google.com/maps/api/jssensor=false
to:
http://maps.google.com/maps/api/js?sensor=false
I was able to get the map to load and show a marker in the middle of the map.