I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:
<div class="widget-content listing-search-map-widget-content">
<div class="ih-map"
id="Map_5333811_16"
style="height:450px;"
data-centerpoint="38.573955 -121.442478"
data-mousewheel="true"
data-maptype="TERRAIN"
data-zoom="8"
>
</div>
</div>
The javascript comes down to:
mapOptions = {
attributionControl: true,
center: {
lat: 38.573955
lng: -121.442478
},
centerpoint: "38.573955,-121.442478",
layers: {},
maptype: "Terrain",
scrollWheelZoom: false,
zoom: 8
}
var map = L.map( "Map_5333811_16", mapOptions );
What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:
This sounds like a symptom of missing Leaflet CSS file, or incorrect version of that file.
As has been pointed out, this is solved by importing the CSS files.
Classically, you include the link to your CSS stylesheet in the head section of your document:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding
import "leaflet/dist/leaflet.css";
into the main.js file.
The key lines of CSS appear to be these:
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
so knowing that you can insert them at whatever point in your project suits your style.
add these to your index.html
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selection control - Azure Maps Web SDK Samples</title>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css"
type="text/css"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
<!-- Add references to the Azure Maps Selection Control module JavaScript and CSS files. -->
<link rel="stylesheet" href="./selectionControl.min.css" type="text/css" />
<script src="./selectionControl.min.js"></script>
<script type="text/javascript">
var map, datasource;
//GeoJSON feed that contains the data we want to map.
var geojsonFeed =
"https://azuremapscodesamples.azurewebsites.net/Common/data/geojson/SamplePoiDataSet.json";
function GetMap() {
//Initialize a map instance.
map = new atlas.Map("myMap", {
center: [-73.929, 40.7406],
zoom: 10,
style: "grayscale_light",
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "",
},
});
//Wait until the map resources are ready.
map.events.add("ready", function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
datasource.importDataFromUrl(geojsonFeed);
//Create a layer to render the points.
map.layers.add(
new atlas.layer.BubbleLayer(datasource, null, {
color: [
"case",
//If there is a color property, use it.
["has", "color"],
["get", "color"],
//default to blue.
"#3399ff",
],
})
);
var control = new atlas.control.SelectionControl({
style: "auto",
// selectionModes: ['circle', 'time']
source: datasource,
});
map.events.add("dataselected", control, function (selectedShapes) {
console.log(selectedShapes); // printing the selectedShapes
alert(selectedShapes.length + " shapes selected");
});
//Add controls to the map.
map.controls.add(
[
//Optional. Add the map style control so we can see how the custom control reacts.
new atlas.control.StyleControl({
style: "auto",
persistSearchArea: true,
}),
//Add the selection control to the map.
control,
],
{
position: "top-left",
}
);
});
}
</script>
</head>
<body onload="GetMap()">
<div
id="myMap"
style="position: relative; width: 100%; min-width: 290px; height: 600px"
></div>
<fieldset
style="width: calc(100% - 30px); min-width: 290px; margin-top: 10px"
>
<legend><h1 style="font-size: 16px">Selection control</h1></legend>
This sample shows how to use the selection control. This control connects
to a data source and lets you draw polygon areas on the map and retrieve
all the point shapes in the data source that are within that area. Press
the pointer button in the top right corner of the map to choose a
selection mode, then draw on the map. This samples uses the open source
<a
href="https://github.com/Azure-Samples/azure-maps-selection-control/"
target="_blank"
>Azure Maps Selection Control module</a
>
</fieldset>
</body>
</html>
I'm using the azure maps selection module to filter out a data points based on selection. But console.log (selectedShapes) on "dataselected" event returns a array with undefined values. However the alert shows the number of elements in the array. But they are all undefined. Is there anything that I'm missing ? Thanks.
When I run my local .png tile library in a simple Leaflet index.html I get perfectly rendered and geo-correct tiles:
<script>
function onLoad() {
var mymap = L.map('mapid').setView([-42.132, 147.175], 12);
L.tileLayer('demo-map/{z}/{x}/{y}.png',
{ maxZoom: 16 }).addTo(mymap);
}
</script>
</head>
<body onload="onLoad();">
<div id="mapid" style="height: 500px;"></div>
</body>
But when I put the same path in "url=" in react-leaflet TileLayer, the tiles do not render.
<BaseLayer checked name="Local Map (Offline)">
<TileLayer
attribution="This map is offline"
url="demo-map/{z}/{x}/{y}.png"
/>
</BaseLayer>
The .png tiles are stored in src/demo-map/ in the same directory structure that Mobile Atlas Creator exported
Can anyone help me load my tiles in react-leaflet, or suggest a method incorporating standard Leaflet into my React app, bypassing react-leaflet and TileLayer?
Thank you
what worked for me, is that i moved my tiles folder into the public directory, then in the jsx code I refer to it like this :
and this is my directory :
Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
I am a newbie to leaflet.js. Can anyone help me with debugging the following code? I am trying to show a map on screen but only zoom-in and zoom-out button shows up on Google Chrome and the map screen is empty.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
#mapid { height: 180px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
</body>
</html>
Here is your corrected code: http://plnkr.co/edit/E7dw2AuNbLneYpz51Qdi?p=preview
There is no tile provider in your code, so nothing is showing in your map.
Check out the source of http://leafletjs.com/examples/quick-start-example.html
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
If you don't want tiles from mapbox, you can use openstreet map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
Re-read the Leaflet quick-start tutorial, in particular this bit:
It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles, and it doesn’t even contain a single provider-specific line of code.
Leaflet doesn't add any default map data. It's up to you to tell Leaflet which data (vector features, tile layers) you want to show.
In case anyone else like me comes here looking for answers to why Leaflet isn't displaying, I found that Chrome would not display my map unless I set the width of the div, as well as the height.
As has been previously said, that wasn't the primary issue in the OP's case, but their code is also missing a width specification.
I have built a responsive website with media queries to target different mobile devices but would like to have an "override all" link available on smaller devices. When clicked, the link would remove all media query styles and reset the page to default styles, exposing the site as it would at 1024px wide. Is there a way to achieve this?
The only way you can do this is with Javascript. I came up with two solutions:
id/class on <html> element:
Apply an id or class to the html element: <html class="media-queries">.
In your media-queries, every selector will start with .media-queries:
CSS
#media (max-width: 300px) {
.media-queries #nav li {
display: block;
}
.media-queries #main, .media-queries #aside {
float: none;
}
}
Then, you get JS to remove class="media-queries".
HTML
<a id="del-mq" href="#">Default style</a>
JavaScript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('html')[0].removeAttribute('class');
}
jQuery
$('#del-mq').click(function() {
$('.media-queries').removeClass();
});
Pros: no extra http requests.
Cons: lots of css selectors(.media-queries), which shouldn't be a problem if using Sass:
#media (max-width: 300px) {
.media-queries {
#nav...
#main...
}
}
External media-queries.css
All the media queries go in a separate css file. Include it with <link rel="stylesheet" href="media-queries.css">.
Then you get an ID for the <link> and remove the element.
HTML
<head>
<link rel="stylesheet" href="default.css">
<link id="media-queries" rel="stylesheet" href="media-queries.css">
</head>
<body>
...
<a id="del-mq" href="#">Default style</a>
...
</body>
Javascript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('head')[0].removeChild(document.getElementById('media-queries'));
}
jQuery
$('#del-mq').click(function() {
$('#media-queries').remove();
});
Pros: no need for lots of css selectors.
Cons: extra http request.