I searched for this topic but could not find any other instances. I am attempting to add KML layers using leaflet-omnivore to my Mapbox map, but each time the map loads, the basemap works but the KML layers (which should be in the same extent) do not load. The HTML document and the KML layers are hosted on the same domain. I am new to using leaflet-omnivore, and wondered if I am doing something wrong? The coordinate system for the KML also is WGS84, so I don't see how that could be the issue, either. I've basically copy and pasted the code from the example and am running that, other than substituting my own URL for the example, as well as adjusting the map basemap, extent, and key.
Any help or insight appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'deleted for post';
var map = L.mapbox.map('map','mapbox.light').setView([41.5, -72.67], 9);
// omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
// or both the server it is requested from and the user's browser must
// support CORS.
// Internally this uses the toGeoJSON library to decode the KML file
// into GeoJSON
var runLayer = omnivore.kml('http://magic.lib.uconn.edu/magic_2/vector/apindex_37800_0000_1934_s12_FAS_1_shp_wgs84.kml')
.on('ready', function() {
map.fitBounds(runLayer.getBounds());
})
.addTo(map);
</script>
</body>
</html>
Your icons aren't defined correctly. It looks like you might have not converted the URL when you decompressed the KMZ.
<Style id="IconStyle00">
<IconStyle>
<scale>0.25</scale>
<Icon>
<href>df080276-b1b3-4280-bf72-a57bb8c4960e.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>00000000</color>
<scale>0</scale>
</LabelStyle>
<PolyStyle>
<color>ff000000</color>
<outline>0</outline>
</PolyStyle>
</Style>
If I add a url to an icon, I see them show up on the map, but it does take a while to render.
This KML file is 14mb - loading this with AJAX into a Leaflet map isn't the best approach, because it'll take a long time to load and be slow once it's on the map. Your best bet would be to bring this data into a tool like TileMill or CartoDB to generate tiles from it, and put those on a map.
Related
Currently working on an app (map) where I would like to use the Tom Tom tile layers on top of Leaflet. Due to Leaflet's documentation I would like to stick to Leaflet, rather than Tom Tom. I was successful at setting up the map using the Tom Tom approach, but I couldnt get the tile layer to be added using the leaflet library.
I cant see what Im doing wrong. Could anyone help please?
According to the leaflet tutorial the code should work like this: https://leafletjs.com/examples/quick-start/
The Tom Tom tile map API url can be generated from: https://developer.tomtom.com/content/maps-api-explorer#/Vector/get_map__versionNumber__tile__layer___style___zoom___X___Y__pbf
`
// Creating a map instance with its center set to London with a zoom of 13
var mymap = L.map('map').setView([51.505, -0.09], 13);
// Accessing the tile layer from the TOMTOM site
L.tileLayer('https://api.tomtom.com/map/1/tile/basic/main/1/0/0.pbf?key=MY_API_KEY', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
//id: 'mapbox.streets',
//accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap css and scripts -->
<link rel="stylesheet" href="./00_Local_Bootstrap\css\bootstrap.css">
<script src="./00_Local_Bootstrap\js\bootstrap.js"></script>
<script src="./00_Local_Bootstrap\jquery_3_4_1\jquery_3_4_1.js"></script>
<!-- Leaflet css and scripts -->
<link rel="stylesheet" type="text/css" href="./Leaflet\leaflet.css" />
<script src="./Leaflet\leaflet.js"></script>
<style media="screen">
#map {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<!-- Map Import-->
<div class="container">
<p>Here is the map</p>
<div id='map'></div>
<!-- Mymap script -->
<script src="./welcome_page_leaflet.js"></script>
</div>
</body>
</html>
`
The leaflet documentation is using Mapbox, which is why they refer to the corresponding access token and id. Thats why I commented it out.
The map doesnt load the tiles and I only get a blank screen where the map should be. What am I missing?
Looks like you are trying to display vector tiles (with PBF extension) through Leaflet Tile Layer, which is meant for raster tiles.
Tom Tom provides raster tiles as well: https://developer.tomtom.com/maps-api/maps-api-documentation-raster/raster-tile
I tried using this example http://openlayers.org/en/master/examples/mapbox-vector-tiles.html
And it works well.
I have now styled my own map in Mapbox studio online.
I am not able to add my styled map in this example because there is a style function createMapboxStreetsV6Style() in the example which I am not able to get for my styles.
Any idea how I can add my styles mapbox vector map to openlayers 3?
Any help would be appreciated.
This is now possible using ol-mapbox-style.
I've recently found an issue, however, it should not stop you from using this awesome package. I'm sure the maintainers will address that issue in no time.
Depending on what you are using the map for, you can replace Openlayers for Mapbox-GL-JS as the maps will be much more fluid and better performing overall. Here's an example to get you started if you're interested.
Otherwise, I'll point you to one of the help guides on Mapbox.com that walks through the steps to style a tile map and use it in Openlayers 3.0.
Hope this helps
EDIT: A better example to work off as an example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapBox Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js"></script>
<link url="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css">
</head>
<body>
<div id="map"></div>
</body>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
tileSize: [512, 512],
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=Your access token here'
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
and lastly CSS:
body { margin:0; padding:0; }
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
I'm very new to this and learning as I go so please be patient!
I have a geoJSON file, which I have successfully (manually) imported into Mapbox / Leaflet.
However, rather than doing it manually, I would like to load the geojson file automatically. I have tried using the following code, where the file ('crimeReportSummary.geojson') is saved in the same directory as my Index.html file.
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RldmVyZCIsImEiOiJ5T0hIMGU4In0.iRYeTkjtats3I4b2ZCBZVw';
var map = L.mapbox.map('map', 'steverd.l9nc6o7n')
var featLayer = L.mapbox.featureLayer().addTo(map);
featLayer.loadURL('crimeReportSummary.geojson');
</script>
</body>
</html>
My problem is, when I run this code, the map appears correctly, but none of the markers appear.
I would be really grateful if someone could advise me how to do this! I am a noob, so simple explanations are appreciated. I have spent hours today trying to figure this out, but without luck. Thanks so much in advance for your time.
Edit - the geoJSON file I'm using can be found here
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
I'm having strange issues with text on a canvas when using an iPhone or iPad.
Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all.
When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated.
I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seems to be drawn over if I call fillText as soon as the document is loaded.
Anyone else experiencing this sort of problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//draw_b();
setTimeout('draw_b()', 500); ;
});
function draw_b() {
var b_canvas = document.getElementById("cv");
var context = b_canvas.getContext("2d");
context.fillText("Belated hello world", 50, 50);
}
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>
</body>
</html>
I have the same problem ,
the earlier version(3.2) doesn't support HTML5 Canvas filltext,
You can use alternative API such stroketext to fix this issue: http://www.netzgesta.de/dev/text/#canvas_api