I want to display all of my data (as point with coordinate or make line with multiple points) that I found on google I see that I can use Openstreetmap (OSM) to get the map layers, but I do not know if I can draw points with the data I have in the database.
Another choice is to use Leaflet but I still don't know how to dynamically draw data to the maps. Do you guys have any example or guide?
This is the code I used to display the map I need to the website.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=105.82374572753905%2C9.49511711740931%2C106.68754577636719%2C10.14193168613103&layer=mapnik&marker=9.81868236535723%2C106.25564575195312" style="border: 1px solid black"></iframe>
<br/>
<small>
View Larger Map
</small>
Related
I would like to dynamically scale an iframe that has a fixed width/height to fit into grafana panel with a dynamic width/height.
Maintaining aspect ratio would be nice, so just scaling to fit width or height is probably best.
Background info:
I want to stream some video data from an Axis IP Camera into a Grafana panel. Things are working, but I want the image to scale up when the user clicks on the panel.
http://CAMERAIP/axis-cgi/mjpg/video.cgi?resolution=854x480&compression=50&camera=1
In grafana, I'm using a text block on text mode of "HTML" and the video is streaming fine. The resolution is fixed, so if a user clicks on a panel (or just resizes it) to see a bigger image, they see the same size image, if I pick a bigger resolution, then the image is cropped if the panel is small.
Iframe code:
<p align="center">
<iframe scrolling="no" style="border: none" src="http://CAMERAIP/axis-cgi/mjpg/video.cgi?resolution=854x480&compression=50&camera=1" width="854px" height="480px"></iframe>
</p>
Changing the width/height of the iframe doesn't change the width/height of the image returned by the URL unfortunately.
(see some docs on the AXIS options for the mjpg stream here: https://www.axis.com/vapix-library/subjects/t10175981/section/t10051110/display
now I use leaflet.
I want to know what are their policies about heavy traffic.
like OSM, I have to make another server? then, how can i do?
thanks for answering.
Leaflet is a javascript library and does not provide tiles. So there is no limit in using leaflet.
Your question is more towards the provider of the tiles that leaflet uses.
For example:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
The map you see is actually a set of images (usually 256x256 pixels). There are served by a tiles server. See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames.
The limitation you want to know is the limitation of the tiles server.
Leaflet is the glue that knows which tiles to show according to the lat,lng you want to show.
The TileLayer you create tells leaflet where it must get the tiles from.
I am wondering if it is possible with leaflet.js (current beta version) to only draw the border on the inside of the polygon (inline border).
For example: I have a square polygon with a 6px border. This would show 3px of the border on the inside of the polygon and the other 3px on the outside. Is there a way to only show the 3px on the inside?
A workaround is to reduce the size of the polygon and use the default border, but it would be nice to have an option without having to reduce the size of the polygon.
Does anyone know how to achieve this without reducing the size of the polygon?
Cheers
I want to show secondary/tertiary roads at a zoom level like 10 or 11. At that zoom level I only see the primary roads, I did try to style it with carto css, but its not working.
Thank you
[class='secondary'][zoom>=11] {
line-color: red;
line-dasharray: 2,1;
line-width: 19.2;
}
It's not possible.
The mapbox-streets-v6 vector dataset that ships with Mapbox Studio Classic only has certain vector data layers at each zoom level. The waterway data does not appear in this dataset at any zoom lower than 8, which is why you can't style it at any other zoom level.
Fortunately, this data comes from OpenStreetMap, so you can add it as a custom source in Mapbox Studio Classic and style it along with the other data! There is even a guide on grabbing this data from OpenStreetMap with Overpass Turbo.
I am using leaflet.js to render tiles from openstreetmap. I have it working fine. I would like to display the entire world map (zoom level 0). This also works fine. My problem is that on zoom level 0 the world is kind of big. Is it possible to render the world map in a div 100px wide, for example?
if you want to change the width or height of the div containing the map, use CSS,
like this:
<style>
#map{
width:100px;
height:300px;
}
</style>