Mapbox JS Marker Creation On Click - javascript

I am currently using mapbox js in conjunction with a satellite imagery API and I am wondering how to display a very simple marker of the last click (from the user) on the map.
Ideally when the user clicks in the map it would be display a small semi-transparent square which would correspond to the zoomed in area being displayed by the satellite API.
There's a ton of information about interacting with current markers that were created beforehand, but I want to dynamically create a marker on click that only lives until the next click.
It would be something like below, only with a smaller radius.

If you are just looking to add the circle and remove it on the next mouseclick, something like this would work:
L.mapbox.accessToken = 'pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g';
var map = L.mapbox.map('map', 'mapbox.streets').setView([38.91338, -77.03236], 16);
streetsBasemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g', {
maxZoom: 18,
minZoom: 6,
zIndex: 1,
id: 'mapbox.streets'
}).addTo(map);
map.on('click', addMarker);
function addMarker(e){
if (typeof circleMarker !== "undefined" ){
map.removeLayer(circleMarker);
}
//add marker
circleMarker = new L.circle(e.latlng, 200, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
}
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Single marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>

Related

Javascript: Polygon not showing on the map

Why polygon not showing on the map? I was trying to highlight a specific location using polygon but it is not showing on the map even though there is no error. here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js">
</script>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p>© MapTiler <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap
contributors</a></p>
<script>
var map = L.map('map').setView([8.94917, 125.54361], 12);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?
key=aLd1dKi19JrBFCzDze2p',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\"
target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca
href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy;
OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
var polygon = L.polygon([8.94917, 125.54361],[9.00333023, 125.48916626],
[8.85280991, 125.66551208]).addTo(map);
</script>
</body>
</html>
There are several issues that prevent the map from displaying, and the polygon shape for loading:
some small errors in source, caused by line returns: see browser console to check and correct these. (note these might not exist in your source, but may be caused by line wrapping when copy/pasting the source).
Main issue is that the polygon coordinates should be wrapped in an array, as shown in bold in this example :
var polygon = L.polygon( [ [8.94917, 125.54361],[9.00333023, 125.48916626], [8.85280991, 125.66551208] ] ).addTo(map);

How can I show the circle around the marker?

I am trying to show a circle around the marker which will tell user the range of that marker. I have tried so far following code. I am not being able to show the circle.
I want something like this.
var map = L.map('map').setView([42.35, -71.08], 13);
var userLocation = new L.LatLng(42.237, -71.96);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', {
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var marker = L.marker(userLocation).addTo(map);
var circle = L.circle(userLocation, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
.container {
width: 800px;
margin: 20px auto;
}
#map {
width: 800px;
height: 450px;
border: 1px solid #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
<div class="container">
<h1>Maps:</h1>
<div id="map"></div>
</div>
The circle is drawn but the coordinates at which you place it are way beyond the viewport.
Zoom out 3 steps and see it located between Spencer and Leicester (follow the I-90 from Boston in SW direction).
Set the user location first in your code and use it for viewport definition, marker and circle placement.
var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
//...
var marker = L.marker(userLocation).addTo(map);
//...
var circle = L.circle(userLocation, {
//...
Standalone code:
var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var marker = L.marker(userLocation).addTo(map);
var circle = L.circle(userLocation, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
Demo
See this JSFiddle
Update
The Q references an outdated leaflet version and CDNs that seem to have some problems with the current release.
With the following resource urls, everything works fine:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'></script>

can't view a raster image (multiband satellite image) with image overlay plugin over leaflet

i'm trying to view a raster image (multiband satellite image) ,with 8 bands , in a web mapping site using image-overlay (leaflet plugin) . i get the image extent blank . this is the raster file that i used
<html>
<iframe src="https://onedrive.live.com/embed?cid=313D1A84155423E8&resid=313D1A84155423E8%21103&authkey=ADFZt66lh2yvK-g" width="98" height="120" frameborder="0" scrolling="no"></iframe>
</html>
raster_file
and the result viewed in the website raster viewed in website
this is the source code
<!DOCTYPE html>
<html>
<head>
<title>raster</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"></script>
<style type="text/css">
html, body, #map {
margin: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var map = L.map('map', {
center: [31,-8],
zoom: 8,
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(map);
var bounds = new L.LatLngBounds(
new L.LatLng(34.22,-8.68),
new L.LatLng(32.01,-6.27));
var overlay = new L.ImageOverlay("croplf3.tif", bounds
);
map.addLayer(overlay);
</script>
</body>
</html>
You should be able to use the built in ImageOverlay functionality.
var bounds = new L.LatLngBounds(
new L.LatLng(34.22, -8.68),
new L.LatLng(32.01, -6.27)
);
var overlay = new L.imageOverlay("croplf3.tif", bounds)
.addTo(map);

Markers issue when uploading KML file my website using API key

everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Button to drop markers on google maps (for a non programmer)

I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)
Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>

Categories