Geotiff in leaflet - leaflet

I am creating a webmap using leaflet and I need to display tif raster images. I consulted all the types of methods to display these data; however, I do not understand so much, so I am having some difficulties.
I already tried to install the leaflet-geotiff from github, but I was not able to use it. I also try the georaster-layer-for-leaflet and also I was not able to use it.
Can anyone help me please?
Thank you

Related

Mapbox : Bulk markers breaks down browser

Could anyone please help me on this,
I am using map box to plot different markers around 10,000+ in a window using GeoJSON format. While loading so, the browser window will get stuck and the user is not able to perform any actions. Is there any other alternative way to get rid of this or optimizing it.
Thanks in advance
You can have a look at Mapbox-GL-JS. The guys at mapbox have implemented a smart strategy to parse and visualize large GeoJSON files using web workers.
Additionally, MapboxGL uses WebGL to visualize the data, so it should perform better with large datasets.
Other options include using an Html5 Canvas to render the data. Here is an example with Leaflet and Canvas overlay: http://bl.ocks.org/sumbera/11114288
Please check this out to optimize the loading & performance :
Optimizing data in mapbox

OpenStreetMap Grayscale tiles?

I'm building up experience with web development and my next projects are some web maps. I've looked into Google Maps and Open Street Maps and would like to use OSM for a project as it contains more detailed information of building footprints.
I've tried styling Google Maps which seemed fairly straightforward, but I'm a little lost with OSM. I've got to the point of trying to create my own renders (with TileMill) but this is crashing my system due to the amount of data.
What I essentially need is this (but for the UK);
http://maps.stamen.com/#terrain/12/37.7706/-122.3782
Are there any resources which you can recommend or how easy/ difficult is this to create myself? I think I would need to create the map (with TileMill or similar and then find my own servers to host), or is there an easy way to convert the standard map to Grayscale?
I want to keep it as simple as possible so please any recommendations?
Turning the standard map to grayscale: I might be very late to this but for anyone else running into this question: I found a very easy solution if you're working with HTML and Javascript using OpenLayers and the standard OpenStreetMap-Tile-Layer in color. I took the solution from here: https://openlayers.org/en/latest/examples/semi-transparent-layer.html
I don't know much about web development but this solution worked for me. Upon creating the map, as done in main.js in the example from the link, a class name is defined ('bw')
className: 'bw',
that can be used in index.html to manipulate the style o f it in the part:
<style>
.bw {
filter: grayscale(100%);
}
</style>
My application was altering a pre-built web-map from the qgis2web extension for QGIS. I was able to turn the tile layers from the background map to grayscale so the results would stand out more.
You could use https://github.com/Zverik/leaflet-grayscale to display any tile layer in grayscale. It's a plugin built upon the leaflet map displaying library.

Using OpenStreet map in website with LeafletJS to display heapmap

Is it possible to download OSM or embed OSM and use leafletjs on top of it to display heat map?
I have searched a lot and could not find anything related. I wanted something like this form Google Maps.
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
I did find the mapbox but we need to pay them. I need something open source.
Please suggest me.
You can create heatmaps with Leaflet by using the various available plugins:
http://leafletjs.com/plugins.html#heatmaps
However, you'll need some vector data to build a heatmap, not just the tilelayer. If you want to use OpenStreetMap to get your data, try a service like http://overpass-turbo.eu/ to download the things you want in this format.

chart library which can edit graph by dragging points?

I'm looking for preferably javascript (but flash would do too) charting library which would be able to render time series as line chart and then allow to drag points in chart to change the underlying data.
I was said that Excel can do exactly the same thing, but I need it on web. No well-known charting library like Highcharts, amCharts, GoogleCharts or dygraphs cand apparently do that - I found some draggable graphs solutions like WireIt or http://radokirov.com/js-graph-editor/ but these are nodes and edges types of graphs not really-usable for chart drawing.
Do you know any ready for use solution to this problem? I don't care whether it's opensource or commercial.
Late response; I might help future visitors, though.
I'm looking for something similar. try: http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html
Some other options (hopefully helpful to future visitors):
FusionCharts: https://www.fusioncharts.com/charts/visually-editable-charts/editable-line-chart
Chart.js (plugin): https://github.com/chrispahm/chartjs-plugin-dragData

Custom Maps in iPad App

I just want to build a drill down map like this - Drill Down Map
Here I want to show some data on tapping of each regions.I am out of clue. How can I ? What should I use ? From where to start ?
EDIT : In the link it's showing the country name on mouse over, instead of that I want to show some data/info of the country on touch. Please visit the map shown in the link,you'll get the whole idea.
Thanks !!
If you want total control on the map layout, and be able to check which country the users taps, there's no secret : you need to have boundaries of all countries you want to detect.
Here's the global approach I would use to reimplement something that looks like the map you linked to (I can you into more details if you want, but at first, here's the global approach) :
Get the data of the boundaries of the countries you need. This can be done using OpenStreetMap.org data.
[EDIT] I just came accross this website to download countries boundaries as files you can then use with tilemill : http://www.gadm.org/country
Use this data with tilemill (http://mapbox.com/tilemill/) : this tool is able to design maps using a language that looks like CSS but dedicated for maps. The results is great and the tool great as well. This tool also support shapes files, so if you can get the countries boundaries as shapefiles, you'll be able to use them with tilemill, and this will be easier than using .osm files from open street map). Have a look here http://mapbox.com/tilemill/data/ for the supported formats.
Then, with tilemill, export your map as an MBTile file (this file contains all tiles needed to get the map rendered at different zoom levels).
Use the route-me project to display the resulting MBTile file (in its latest version, route-me is able to do that, this feature has been implemented by the mapbox team to support their open format MBTile).
Guys from Mapbox have published a good tutorial "from data to maps" here : http://mapbox.com/demo/making_massredistrict/ this may help as well
Your best bet is to use CloudMade ( http://cloudmade.com/ ). They provide custom map builders program where you can build custom maps and can integrate those maps in your iOS app.
Depends what you are looking for. To implement the linked example it's enough with a giant image that you can split in tiles using CATiledLayer. You'll find examples if you google a little, PhotoScroller is one. If you want to display real maps you have to investigate the route me project.
I don't think that using images could be good option.Check this link - arcgis-iphone api. I am not so sure but you can get some idea from this.
Happy to help..