Create Map sample that clicks into the actual map - javascript

I am trying to build something that prevents users from clicking on the interactive aspects of the map until they click the map initially like shown when you google search a place like the Toronto Eaten Centre.
I did a visual mock to better explain:
I am using google maps and I am not able to get a div to float over the google maps (which was my first attempt at creating this by just having a div float over that when clicked on would disappear and the map would resize via javascript). Google does this well when you search for a location example found here.
Here is my fiddle trying to float a div over top so that i could use it to click into the actual map.
Below is the css of the floating div that will not show above the map even with absolute position and z-indexes
.map-floater {
position: absolute;
z-index: 3;
height: 280px;
width: 100%;
background: #555;
opacity: 0.7;
}

Your markup isn't right, put the overlay in same container as the map
<div class = "map-holder">
<div class = "map-floater"> </div>
<iframe src="path/to/map" width= "100%" height = "380px" frameborder="0"/>
</div>
DEMO

Related

How can I display an image on top of a generated heatmap?

I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?
I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}

How can I click on a link which opens an image, then only display part of that image

I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>

How to generate a textbox on top of a mapbox map?

I am rather new to JavaScript, but I have this mapbox map that I hope to add a dynamic textbox on top of. Right now, I have a window.setintervalcommand running that adds new markers to the map every half second or so. What I want to do is add a changing textbox that displays a date, which changes with every window time interval.
Could anyone help me with adding this textbox in the corner or something so that it displays a changing date (starting from 1/1/16 on) on top of the mapbox box?
You could just do something like this:
<div class="container">
<div class="element-with-timer"></div>
<div class="element-with-map"></div>
</div>
<style>
.container {
position: relative;
}
.element-with-timer {
position: absolute;
z-index: 5;
}
</style>
Within the .element-with-timer css styles, would would then place the element where you want on the page by changing "left" or "top" values.
If you want to keep the timer in the same position, regardless of scroll position, change position: absolute to position: fixed

Transparent div overlaping Google's logo on Google maps

On my website's homepage there's a big picture which take 100% of the width and 60% of the height (it's a div with a css background-picture not an tag).
Over this picture, there's is a black transparent div (mainFormContainer) with some form input.
Two of those inputs are address field which are bind to Google Place autocomplete.
Here is the HTML code
<div id="titleContainer" class="splash-container" style="position: relative;" >
<div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
<div id="mainFormContainer" class="splash-bottom">
<form></form>
</div>
</div>
Basically what I did is that when an address is filled by clicking on an autocomplete suggestion (event place_changed in javascript) I initialize & display the google map with a marker on the location.
It works fine and looks great but the problem is that the mainFormContainer is over the Google logo of the google Maps (bottom left corner) and over the map's data (bottom right corner).
Since the div is transparent background-color: rgba(0, 0, 0, 0.6); the bottom data is not hidden and I used this solution (Responding to links under an overlay div) to make the below link clickable.
However, because my div is not transparent, this data is less visible and I'm not sure if it'll be a problem.
I would like to know if there is a solution to add some padding to the google logo & the bottom right data of the map ?
I've seen that you can do it on ios (https://developers.google.com/maps/documentation/ios/map#map_padding) but I didn't found anything equivalent for the javascript API
The only solution I could find was to add some invisible div as map controls to add padding but it doesn't work on the bottom data.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(createDummyDiv('100%', '20%'));
But since it add a div in the google maps, I tried the following code :
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
var clone = $('#mainFormContainer').clone(true);
clone.css('width', '100%');
clone.css('height', $('#mainFormContainer').height());
console.log(clone[0]);
return clone[0];
}
This trick gave me numerous new problem :
The Google Place autocomplete doesn't work (Autocomplete suggestion doesn't show at all)
The design for the font are herited from the maps and not my CSS
I have a field input with a datepicker that doesn't work as expected. The datepicker appear but when I click on a date, it doesn't fill the input.
So I gave up on this solution.
These elements have a common property, they are placed via CSS at: bottom: 0px;
You may use this to create a selector:
#mapContainer div[style*="bottom: 0px"]
to apply the padding you may use a transparent border at the bottom:
#mapContainer div[style*="bottom: 0px"]{
border-bottom:50px solid rgba(0,0,0,0);
}
Demo: http://jsfiddle.net/doktormolle/m2rumozm/
But I'm not sure if it's a good approach(the API may change), you better try your final attempt(use the form as map-control). The issues #1 + #3 probably may be fixed when you add the original #mainFormContainer instead of a clone(at least an autocomplete works without problems as a control, I've added an autocomplete to the fiddle to demonstrate it). Issue #2 should be solvable via CSS.

Drag over a background image

I am trying to develop a map for a game.
The whole map is a single image that is 6000px x 6000px. The map is shown as a background of a div (container) that is 6000px x 6000px as well.
My question is what is the easiest way to make my map draggable, so you can click in the middle of the screen and just drag to the sides.
The map itself (the div container) shouldn't change position as I plan to populate it with POI.
I don't need any funcy staff, like zoom etc, just that the user doesn't need to use sliders in the webpage to navigate, just to click on map and drag left/right/up/down to move.
Sorry if this is answered before, I couldn't find an answer.
Here is a minimal example, which allows dragging an image inside a div
<div id="container">
<img id="draggable" src="http://lorempixel.com/800/800" />
</div>
#container {
width: 400px;
height: 400px;
overflow: hidden;
}
$('#draggable').draggable();
See full JSFiddle

Categories

Resources