Develop Reference

How can I get a polyline or geometry coordinates for municipality in map?

this is my code
$(document).ready(function(){
var map = L.map('map').setView([37.8, -96], 4);
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
L.geoJson(statesData).addTo(map);
})
and this is the sample data I got from internet that works. But what I want is the municipality of the Philippines.
var statesData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}}
]};
I've tried using leaflet.js and googlemap and openstreetmap for my map interface

Mismatch EPSG4326 tiles and (0, 0) origin point

I am currently trying to create a tile map in Leaflet and I want to be able to sync real life EPSG4326 coordinates in the map but I can't change the location of the map.
In this picture you guys can see where is (0,0) and not in the middle of the map:
and this is my code:
var mapMaxZoom = 6
var mapMinZoom = 0
var mymap = L.map('mapid', {crs: L.CRS.EPSG4326}).setView([0,0], mapMaxZoom);
L.tileLayer('./tiles/{z}/{x}/{y}.png',{
noWrap: true,
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tms: true,
}).addTo(mymap);
L.marker([0,0]).addTo(mymap)
.bindPopup('A popup.')
.openPopup();
console.log("map crs: " + mymap.options.crs.code)
mymap.on('click', onMapClick);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}```

how to change opacity of zoom buttons on leaflet?

I am trying to change the opacity of the zoom control buttons that I have positioned at the top right of my leaflet map. I tried doing "mymap.zoomControl.setPosition('topright').setOpacity(0.5);" in the last line but it causes the whole map to disappear when I load the page. If you know the code to change the opacity of the zoom buttons on the map such that users are able to see through do let me know.
var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
center: [20.594, 78.962],
maxBounds: bounds, // set max bounds for the world map
zoom: 4, // default zoom level when the web is initiated
zoomSnap: 0.25, // map's zoom level must be in multiple of this
zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
minZoom: 3.25, // min zoom level the user can zoom out
maxZoom: 6, // max zoom level the user can zoom in
zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
var MapAttribution = '© OpenStreetMap contributors © CARTO';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap);
// Array of marker coordinates
var markers = [
{
coords:[4.21, 101.97],
country:'Malaysia',
label:'Malaysia',
},
{
coords:[20.594, 78.962],
country:'India',
label:'India',
},
{
coords:[35.861, 104.195],
country:'China',
label:'China',
},
{
coords:[23.421, 53.8478],
country:'UAE',
label:'UAE',
},
{
coords:[23.6978, 120.9605],
country:'Taiwan',
label:'Taiwan',
},
{
coords:[0.7892, 113.9213],
country:'Indonesia',
label:'Indonesia',
},
];
// Edit marker icons
var myIcon = L.icon({
iconUrl: 'yellowcircle.png',
iconSize: [40, 40], // size of the icon
// iconAnchor: [],
// popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country).addTo(mymap);
marker.on('mouseover', function(e){
marker.openPopup();
});
marker.on('mouseout', function(e){
marker.closePopup();
});
}

setOpacity() is from Dom Util
https://leafletjs.com/reference-1.6.0.html#domutil-setopacity
var mymap = L.map('map', {
center: [20.594, 78.962],
zoom: 4,
zoomSnap: 0.25,
zoomDelta: 0.25,
minZoom: 3.25,
maxZoom: 6,
zoomControl: true
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
mymap.zoomControl.setPosition('topright');
L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<div id="map"></div>

<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"></script>
<style>
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div ng-controller="Ctrl">
<div id="map"></div>
</div>
<script>
console.log(L.map)
var mymap = L.map('map', {
center: [23.022505, 72.571365],
zoom: 4,
zoomSnap: 0.25,
zoomDelta: 0.25,
minZoom: 3.25,
maxZoom: 6,
zoomControl: true
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
mymap.zoomControl.setPosition('topright');
L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);
</script>
</body>
</html>
You have to add titleLayer into the L-map.
can you please refer my code.
You can use the plunker link for check my code:
Plunker Link:http://embed.plnkr.co/daSnET/
copy above code and paste into HTML file you can view a map and you can change opacity and check.

leaflet marker color based on value from objects inside

Writing my observing webapp and need to know quickly damaged points of my devices on my map. i am using leaflet maps. So please, give me the direction whether it`s possible to change color of marker so that it will depend on svg object inside this cluster? for example i have some devices which marked as damaged with a red color. can my map show me the green marker here as red when one of my device there is damaged? Many thanks for answers.
My map example:
<div id="map"></div>
<script type="text/javascript">
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors, Points &copy 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>

Cant zoom in and out of google map

I am trying to implement a google map on the site I'm working on. I copied a example from the google maps api site where you can overlay circles. The map loads fine but non of the controls work being: zooming in and out, panning the map as such. Does anyone know what may be causing this> Below is my code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
population: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Here is a link to the site where its going wrong: http://surftoursouthafrica.com/map

Your code is fine.
On your webpage you have much more stuff that interfere with the map.
Remove col-xs-12 class from the div that surrounds map-canvas and it will work:
<div class="content">
<div id="map-canvas"></div>
</div>