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.
Related
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>
<!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.
I found alot of outdated options on the web so Just wandering what should be the best approach to convert DOM, as an PDF attachment and then send it via email.
I am using React as Front-end and .Net Core web Api as backend.
Thanks in Advance :)
Download jsPDF from Github Include these scripts below:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an
ID, which you can then ignore in a special element handler of jsPDF.
Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in
a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
One very important thing to add is that you lose all your style
information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3
etc., which was enough for my purposes. Additionally it will only
print text within text nodes, which means that it will not print the
values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
Attach the pdf and send emails with the help of this link
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 :
I am using the Chrome toolbar from http://wave.webaim.org/extension/ to check the ADA compliance of my React-Bootstrap app.
When I use a Popover within an OverlayTrigger without an ID, it warns me in the console:
Warning: Failed propType: The prop 'id' is required to make 'Popover' accessible for users using assistive technologies such as screen readers
Problem is, when I add an ID to the Popover, I then get the following error on my accessibility scan:
Broken ARIA reference: An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.
I am guessing it's happening because the element with that ID doesn't exist until the button is clicked. Am I missing something, or is this element not ADA compliant? Or, is this just a problem with the scan, and there's a better tool I should be using to prove my site is compliant?
Here is the code for an example site that demonstrates the issue. I have thrown it in a Fiddle, but it won't do you much good because if you run the accessibility tool on that, it will give you JSFiddle's errors rather than the ones for the relevant code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React-Bootstrap Popover Accessibility</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;
var Overlay = React.createClass({
render: function() {
return (
<OverlayTrigger trigger="click" placement="right" overlay={
<Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
}>
<Button bsStyle="primary">Click to see Popover</Button>
</OverlayTrigger>
);
}
});
ReactDOM.render(
<Overlay />,
document.getElementById('container')
);
</script>
</body>
</html>
I can confirm that the code is not compliant. You can double-check whether this code validates by:
Inspecting this element in the developer console (before the button is clicked)
Copying the rendered HTML to the clipboard
Loading http://validator.nu and selecting the ‘Textfield’ option
Pasting your HTML between the <body></body>tags
Clicking ‘Validate’
As you’ll see, the code does not validate, because, as oobgam mentioned, the target ID is not initially present in the DOM.
There are a number of different approaches to fixing this. Once I understand which design pattern you’re trying to accessibly support, I can provide more concrete advice.
Can you please provide more information about why you chose this implementation? How do you see desktop and mobile users interacting with this, and to what end?
Quora has a good list of related patterns at What's the difference between a modal, a popover and a popup?