Leaflet map to visualize image / geotiff and geojson data
Budget: $30 – $250 USD
I need a proof of concept to generate a map based page using leaflet and appropriate plugins to show weathe data.
Technology:
html5, javascript and css
the map need to have the following layers (1,2,3,4) , the layers can be show/hide with a control, and also should be able to play an animation as an option. This will apply to image (Layer 1) that should show image9 to image1 as animation frames, and if Layer 2 or Layer 3 is on, it should show data accordingly, (animated)
Layer 1. Satellite Image A overlay showing the latest image. imageA_1.png (images will be provided, from imageA_1.png....imageA_9.png) each image is 15 minutes apart see sample https://i.imgur.com/RFYzxfK.jpg
Layer 2. Satellite image B overlay showing the latest image. imageB_1.png (images will be provided, from imageB_1.png....imageB_9.png) each image is 15 minutes apart https://i.imgur.com/w6jnxWX.jpg
Layer 3. Lightning layer (geojson points) timestamp and group, the group is a number 1..9 that will correspond to 1..9 image of 15 min. By default will show group 1, and should be able to animate if played, and in sync with layer 1 and layer 2 if those are visible. see data information in this image https://i.imgur.com/7Lxdu7o.jpg
Layer 4. a geotiff with rainfall information of last 3 hours. this layer should be able to show data values of pixel on click and should be color coded with its corresponding legend/colorscale. View image for reference https://i.imgur.com/DauHD3n.jpg
The map should have a layer control and play/stop animation control as an idea see image named sample. see image link https://i.imgur.com/F68yIJj.jpg
Features:
Show / Hide Layers
Animate Layers (1,2,3)
Refresh layers (reload to get latest images or latest points of geojson)
Use leaflet plugins as needed to achieve the desired results.
This is a simple html/javascript/css page that should run standalone no server needed
the Layer 1, 2, 4 data images/tiff will be provided the links
the layer 3 an api endpoint url with standard geojson data will be provided.
Technology:
html5, javascript and css
the map need to have the following layers (1,2,3,4) , the layers can be show/hide with a control, and also should be able to play an animation as an option. This will apply to image (Layer 1) that should show image9 to image1 as animation frames, and if Layer 2 or Layer 3 is on, it should show data accordingly, (animated)
Layer 1. Satellite Image A overlay showing the latest image. imageA_1.png (images will be provided, from imageA_1.png....imageA_9.png) each image is 15 minutes apart see sample https://i.imgur.com/RFYzxfK.jpg
Layer 2. Satellite image B overlay showing the latest image. imageB_1.png (images will be provided, from imageB_1.png....imageB_9.png) each image is 15 minutes apart https://i.imgur.com/w6jnxWX.jpg
Layer 3. Lightning layer (geojson points) timestamp and group, the group is a number 1..9 that will correspond to 1..9 image of 15 min. By default will show group 1, and should be able to animate if played, and in sync with layer 1 and layer 2 if those are visible. see data information in this image https://i.imgur.com/7Lxdu7o.jpg
Layer 4. a geotiff with rainfall information of last 3 hours. this layer should be able to show data values of pixel on click and should be color coded with its corresponding legend/colorscale. View image for reference https://i.imgur.com/DauHD3n.jpg
The map should have a layer control and play/stop animation control as an idea see image named sample. see image link https://i.imgur.com/F68yIJj.jpg
Features:
Show / Hide Layers
Animate Layers (1,2,3)
Refresh layers (reload to get latest images or latest points of geojson)
Use leaflet plugins as needed to achieve the desired results.
This is a simple html/javascript/css page that should run standalone no server needed
the Layer 1, 2, 4 data images/tiff will be provided the links
the layer 3 an api endpoint url with standard geojson data will be provided.