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
Related
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 am trying to createa "Perfect Scrollbar" using this:
https://noraesae.github.io/perfect-scrollbar/
With the most simple possible code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery.");
$('#msgid').perfectScrollbar();
});
</script>
<div id="msgid"></div>
And I have the followin error:
TypeError: $(...).perfectScrollbar is not a function
Of course every js/css is pointing to the right direction, if needed you can see it live here:
http://florida.red111.net/a.html
Looks like jQuery is not recognizing the library,
Any ideas?
Thanks in advance.
You might not have the jQuery enabled version. This code worked for me:
<title>Test</title>
<!-- META -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
console.log('HELLO!');
$('.id-parent').perfectScrollbar();
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" />
<style type="text/css">
.id-parent {
position: relative;
overflow: auto;
height: 200px;
}
.id-child {
height: 1000px;
}
</style>
</head>
<div class="id-parent">
<div class="id-child">
<h1>Content goes here</h1></div>
</div>
I was also having the same issue. I was calling the perfectScrollbar function before it's declaration. Changing the order worked for me.
I had the same issue. I was using perfect-scrollbar.jquery.js with jQuery 1.6.1. After updating jQuery to 2.1.4, the error disappeared and everything worked as expected!
Try updating jQuery, it solved the problem in my case.
Just update your perfect scrollbar on 0.5.2 version.
It's work for me.
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.
I'm just getting back into web development so forgive me if I sound ignorant. I'm trying to set up a lightbox effect using Magnific Popup. I love it because all of the examples are using responsive design.
I've followed instructions here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
And here: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/
A few times and I don't understand why the pop up isn't coming up. It just links me to a new window with the image on it and not a pop up.
I have this in my head tag:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
</script>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
This is my html:
<a class="image-popup-vertical-fit" href="images/logo.png" title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2" /></a>
I had the same problem, and had the same setup as you. I thought I had called the jQuery library already, but apparently not, because as soon as I added the code (below) before closing my HEAD, everything started working! I know this answer is about a year belated, but maybe it will help others in the future.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>