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%;
}
Related
When one adds an event handler to a tinymce-editor web component, the target of the received event appears to not be the tinymce-editor element, but another component
below the shadow-root of the tinymce-editor element.
Is there any simple way around this because its quite difficult to determine which tinymce-editor element the event was from if you have more than one for example?
(Is this a common approach for, or limitation of, web components or something - seems a bit odd??)
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function changeHandler(evt) {
console.log(evt.target.id); //gives something like mce_<n>
}
</script>
<tinymce-editor id='e1' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<tinymce-editor id='e2' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<script src="https://cdn.jsdelivr.net/npm/#tinymce/tinymce-webcomponent#2/dist/tinymce-webcomponent.min.js"/>
</body>
</html>
is it possible to add an event to SAPUI5 sap.ui.commons.Panel's minimize and maximize? What i need is to add a different style when the Panel's collapse- or expand-Button is clicked.
If the user clicks on the minus-Symbol i have to add a styleclass like pnl.addStyleClass("XYZ"); when the user clicks on "maximize" a different styleclass should be added to the panel pnl.addStyleClass("ZYFDEFD");
if i overwrite the .setCollapse- or .setExpanded-function the panel doesn't collapse or expand anymore, so something else has to be found.
A couple of possible options...
1) You could make use the standard style class (sapUiPanelColl) which is added to the control depending on the expanded state - see example below...
var oPanel = new sap.ui.commons.Panel({});
oPanel.addStyleClass("myPanel");
oPanel.placeAt("content");
.myPanel { background-color: green; }
.myPanel.sapUiPanelColl { background-color: red; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sap.ui.commons.Panel style class example</title>
</head>
<body id="content">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
</body>
</html>
2) Alternatively, if it's not essential to use the Panel from the commons library you could switch to sap.m.Panel (as the sap.ui.commons.Panel is depreciated since version 1.38) and then make use of the expand event
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 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