Ok, I’m not the first to come up with that name, but I like it so it’s staying for now.
The problem space is this: Your web development team is good with forms. They build forms like diurnal animals wake — daily: day in, day out, day in, day out. They want to build a form for a mobile web app*and*it just happens to use HTML5 to grab the geolocation from field deployed phones, tablets, etc.. Great! Geo problem solved — when we collect our form data, we’ll get geo-data*for free.
Not so fast, form-building Valentine — what’s the quality of those data? How accurate is that phone GPS? Is it good*enough?*The answer is probably*yes, most of the time.
But, good enough most of the time isn’t good enough, Faye. What I want is an embedded map where I can move the crosshairs to the actual location inside the form. It’s like all the corrections you do back at the office, but you can do them in the field while the site is still fresh in your mind. Simple. Useful. (Also, infrastructure like Fulcrum App does it because it’s so simple and useful). Hence, questions like this:*http://gis.stackexchange.com/questions/90225/how-to-add-a-floating-crosshairs-icon-above-leaflet-map*and pages like this:*https://www.mapbox.com/blog/help-search-MH370/
I couldn’t get the solution on Stack Exchange to work for me. Besides, I think its the wrong solution. I don’t want to move the icon back to center on the map moving, I want the map to move and the icon to stay stationary. It’s a fine (and probably irrelevant) distinction, but it feels important to me.
So, we build a small page that has the following features:
Leaflet Crosshairs body { padding: 0; margin: 0; } html, body, #map { height: 100%; width:100%; } #metamap { width: 100%; height: 300px; } #crosshair { position: relative; z-index: 10; height: 200px; vertical-align: middle; } #crosshair img { position: absolute; margin: 0; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } <img class="crosshair" src=crosshair.png />
Latitude:
Longitude: <img class="crosshair" src=crosshair.png />
Latitude: Longitude:
Screen shot of app in action
Things to fix:
Oh ya, and git-repo here:*https://github.com/cleveland-metroparks/leaflet-crosshairs
Look there for updates that should include the improvements above.
أكثر...
The problem space is this: Your web development team is good with forms. They build forms like diurnal animals wake — daily: day in, day out, day in, day out. They want to build a form for a mobile web app*and*it just happens to use HTML5 to grab the geolocation from field deployed phones, tablets, etc.. Great! Geo problem solved — when we collect our form data, we’ll get geo-data*for free.
Not so fast, form-building Valentine — what’s the quality of those data? How accurate is that phone GPS? Is it good*enough?*The answer is probably*yes, most of the time.
But, good enough most of the time isn’t good enough, Faye. What I want is an embedded map where I can move the crosshairs to the actual location inside the form. It’s like all the corrections you do back at the office, but you can do them in the field while the site is still fresh in your mind. Simple. Useful. (Also, infrastructure like Fulcrum App does it because it’s so simple and useful). Hence, questions like this:*http://gis.stackexchange.com/questions/90225/how-to-add-a-floating-crosshairs-icon-above-leaflet-map*and pages like this:*https://www.mapbox.com/blog/help-search-MH370/
I couldn’t get the solution on Stack Exchange to work for me. Besides, I think its the wrong solution. I don’t want to move the icon back to center on the map moving, I want the map to move and the icon to stay stationary. It’s a fine (and probably irrelevant) distinction, but it feels important to me.
So, we build a small page that has the following features:
- A crosshairs that is stationary
- A map that moves
- When the map moves, our lat/lon values update in our form
Leaflet Crosshairs body { padding: 0; margin: 0; } html, body, #map { height: 100%; width:100%; } #metamap { width: 100%; height: 300px; } #crosshair { position: relative; z-index: 10; height: 200px; vertical-align: middle; } #crosshair img { position: absolute; margin: 0; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } <img class="crosshair" src=crosshair.png />
Latitude:
Longitude: <img class="crosshair" src=crosshair.png />
Latitude: Longitude:
Things to fix:
- Alignment of crosshairs so they are properly centered
- Better looking crosshairs
- Rounding for those coordinate values
- Do we need jQuery? Pro’ly not
Oh ya, and git-repo here:*https://github.com/cleveland-metroparks/leaflet-crosshairs
Look there for updates that should include the improvements above.
أكثر...