Advertisements

An original point of view

GIS

Original Street View colors without Google API Key

Street View revert from negative scale2

Street View negative scale can be removved easily by applying some CSS code

Street View is a good tool, which can be incorporated into your own interactive maps like Leaflet or OpenLayers. Unfortunately, since 2018 Google doesn’t serve it for free. In turn, the Google Maps products can’t be set up properly, because you can see the “For development purposes only” information along with the poor quality of the map and Street View. Maps appear darker than usual and Street View is displayed on a negative scale. The current pricing for Google Maps you can find here. Maybe it’s not a huge amount to pay, but if you don’t want to do it, you probably won’t need to. In this short post, I would like to show you how to get over (at least partially) the negative scale of the Street View. You will still see the message “For development purposes only”, but your Street View won’t be negative anymore.

The issue lies in the CSS code included in the Street View implementation. In the OpenLayers example, this implementation includes 2 files, the .js and the .css one, which looks pretty much like this:

<link rel="stylesheet" href="ol-street-view.css" />
<script src="ol-street-view.js"></script>

and our alteration can be done in the .css file.
We should find the section, which defines our Street View panorama toggleable on our map. Next, just adding the filter argument and invert function should solve our problem.

#ol-street-view--panorama {
    display: none;
    background-color: #555555 !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    /*-webkit-filter: invert(1);*/
    filter: invert(1);
}

.ol-street-view--activated #ol-street-view--panorama {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-bottom: 3px solid #222222;
    /*-webkit-filter: invert(1);*/
    filter: invert(1);
}
Alternatively, you can use the webkit-filter argument, which has been quoted in the examples above. The result should make you happy (Pic. 1).
Street View revert from negative scale

Pic. 1 Reverting back the Street View negative scale by simple argument in CSS code.

On the other hand, all the Street View options will be negative this time (Zoom, compass, address) but it’s only a minor thing. The landscape captured by the Street View camera won’t be negative anymore.

Mariusz Krukar

Links:

  1. https://www.plugandplaydesign.co.uk/google-maps-for-development-purposes-only-error/
  2. https://developers.google.com/maps/documentation/javascript/streetview
  3. https://www.adoclib.com/blog/google-maps-shows-for-development-purposes-only.html
  4. https://tsh.io/blog/time-of-transition-what-are-the-google-maps-api-alternatives/
  5. https://www.eliassonmarketing.com/google-maps-api-what-you-need-to-know/
  6. Street View – coding library example – negative view
  7. Google Street View with negative colors – standalone version
  8. Google Maps Platforrms FAQ
  9. https://mapsplatform.google.com/pricing/
  10. https://rapidapi.com/blog/how-to-get-google-maps-api-key-free-tutorial/
  11. https://github.com/GastonZalba/ol-street-view
  12. https://gist.github.com/crofty/2197042
  13. https://mapsplatform.google.com/pricing/
  14. https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert()

Forums:

  1. https://stackoverflow.com/questions/13325798/invert-colors-of-an-image-in-css-or-javascript
  2. Py4u.net: Google Maps shows “For development purposes only”
  3. Support.ruckuswireless.com: Dashboard cannot load Google map correctly – Google Map API key

Youtube:

Advertisements
%d bloggers like this: