How can I show the circle around the marker? - javascript

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>

Related

google map is not working inside website

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="container-fluid">
<div class="row">
<div id="map" style="width: 100%; height:100%"></div>
</div>
</div>
Google map with custom marker
hello i am using Google map inside my website.i want to add my logo.png instead of Google marker.i have generated key from Google page & added it inside the script tag. i have followed all the steps given on the Google page i have written the following code for it.but when i use the following code it shows nothing.i want to design same layout as shown in image.
Remove all the outer divs. just remove and try your code works.
refer this question : Google Maps doesn't work when inside a div
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
/* 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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="row" style="width: 100%; height:100%">
<div id="map"></div>
</div>
you should set a size to your div#map like so:
#map1 {
height: 100%;
width: 100%;
}
Adjust according your needs of course.
The crux of your problem goes to integrating google map with bootstrap.In details, you should set the css height style of map tag's parent div(.container-fluid) to 100%;
In order to make the following demo run normally,you should provide your google map api key and your picture file for the marker.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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,
.container-fluid {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 26.880,
lng: 112.644
},
zoom: 8
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(26.880, 112.644),
map: map,
draggable: true,
icon: '/images/github-youtube.jpg'// your image file path
});
marker.setMap(map);
}
</script>
<!-- your google map api key : xxxx-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
PS: this is the first time I used google maps,so maybe some code is weird.I have tried as the following procedure.
1.see google maps getting started page.
2.add customized marker.
3.integrate with bootstrap.
Hope it can help you.

openlayers3 trying to add features interactively with GeoJSON, but no matter, what I put, I always get a point in one spot SE of Africa

Any GeoJSON, just always puts Points on the bottom left side of Africa, even, though, there are coordinates section in GeoJSON.
I use openlayers v3.20.1
GeoJSON, I've tried to use is from:
https://raw.githubusercontent.com/acanimal/Openlayers-Cookbook/master/recipes/data/world_cities.json
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Book of OpenLayers3 - Code samples</title>
<link rel="stylesheet" href="progr/nm/ol.css" type="text/css">
<script src="progr/nm/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="progr/nm/ol.js" type="text/javascript"></script>
<style type="text/css">
.map {
width: calc(50% - 6px - 1em);
height: 500px;
box-shadow: 4px 4px 20px black;
border: 3px solid blue;
float: left;
}
#edit {
padding: 1em;
height: calc(500px - 2em);
}
textarea {
width: 100%;
height: calc(100% - 4em);
}
.tree {
width: auto;
border: 3px solid red;
background: yellow;
float: left;
}
</style>
</head>
<body>
<dev id='map' class='map col-sm-6'></dev>
<dev id='edit' class='map col-sm-6'>
<textarea id='read'></textarea>
<p class='text-primary'>
Paste any valid GeoJSON string and press the <button id='readButton' class='btn btn-primary btn-xs'>Read button</button>.
</p>
</dev>
<script>
var format = new ol.format.GeoJSON();
var layers = {
OSM: new ol.layer.Tile({source: new ol.source.OSM()}),
vec: new ol.layer.Vector({
source: new ol.source.Vector({
format: format,
projection: 'EPSG:3857'
})
})
};
var maps = {
map: new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [layers['OSM'], layers['vec']],
view: new ol.View({
center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
})
};
$('#readButton').on('click', function(){
var src = layers['vec'].getSource();
var txt = $('#read').val();
if(txt === ''){
src.clear();
return;
}
var json = JSON.parse(txt);
var feat = format.readFeatures(json);
src.addFeatures(feat);
});
</script>
</body>
</html>
I've also tried to pass 'txt' content directly to readFeatures method, but it made no difference.
var feat = format.readFeatures(txt);
src.addFeatures(feat);
There is no issue with the geoJSON or its parsing. The error is a projection/coordinate system issue. The map projection you are using does not use lat longs as its unit of measurement. Instead the unit of measurement for the default projection you are using, web Mercator (EPSG:3857), is meters. Whereas the json file you are using uses WGS84, or lat long pairs.
Therefore, all your points are clustered +/- 180 east/west and +/- 90 meters north/south of the intersection of the Prime Meridian and the Equator [0,0], which is off the East coast of Africa. If you zoom in very very far, copying and pasting the json file you linked to, you will find:
You can fix this by ensuring your data is reprojected for display. The only changes I made were in the on click event:
$('#readButton').on('click', function(){
var src = layers['vec'].getSource();
var txt = $('#read').val();
if(txt === ''){
src.clear();
return;
}
var json = JSON.parse(txt);
var feat = format.readFeatures(json, {
dataProjection: 'EPSG:4326', // define the input SRS/CRS
featureProjection: 'EPSG:3857' // define the output SRS/CRS
});
src.addFeatures(feat);
});
By subbing in this for you onclick event I got:

Show a satellite image - leaflet map (javascript/jquery/css)

All I want to show the two satellite map images like this:
I have the image bounds, 4 parameters that define a tile (square):
21.00997925,42.72179487,21.00860596,42.72078596
22.00997925,43.72179487,22.00860596,43.72078596
or I can use the center of the square for example :
21.00997925,42.72179487
Here map is initialized:
<div class="row">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<div class="col-xs-12">
<h1>MAP</h1>
<div style="width:500px; height:500px" id="map"></div>
</div>
</div>
<script type="text/javascript">
(function() {
var map = new L.Map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
var googleLayer = new L.Google('SATELLITE');
map.addLayer(googleLayer);
})();
</script>
based on this link I can do this:
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
Here I created a JS Fiddle
Please, can somebody help me, how to display two satellite images based on latitude and longitude?
If you want to display two maps, you need to create two separate maps.
var map = new L.Map('map', {
center: new L.LatLng(51.51, -0.11),
zoom: 9
});
var googleLayer = new L.Google('SATELLITE');
map.addLayer(googleLayer);
var map2 = new L.Map('map2', {
center: new L.LatLng(51.51, -0.11),
zoom: 15
});
var googleLayer = new L.Google('SATELLITE');
map2.addLayer(googleLayer);
html {
height: 90%;
width: 90%
}
body {
margin: 10px;
height: 100%;
}
#map,
#map2 {
height: 50%;
width: 100%;
border: 1px black solid;
}
<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<div id="map"></div>
<div id="map2"></div>

Mapbox JS Marker Creation On Click

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>

Third party latitude and longitude are not matching in google map

I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!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 src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>

Categories