Wikiocity Documentation

Everything you need to know to start using the Wikiocity API

Vector and Raster Maps

Everything needed to get scalable interactive maps running on your site.


Map Design


Night Mode and Filter Fun

CSS has a powerful filter function that enables an easy way to implement a night design, change contrast and brightness, add greyscale for printing, or change the colors with hue-rotate.
Visit Mozilla's filter function page for a list of availalbe functions.

Night Mode with 'invert'

<style>
    .map {
        width: 100%;
        height: 400px;
		filter: invert(90%);
    }
</style>

Notes:

  • Play around with the percentage to achieve your desired look. Combine with brightness, saturate, or greyscale to further tweak the appearance.

Colorless with 'greyscale'

<style>
    .map {
        width: 100%;
        height:400px;
		filter: grayscale(100%);
    }
</style>

Notes:

  • Can be used for print media. Use saturate(0%) for a similar effect.

Change the colors with 'hue-rotate'

<style>
    .map {
        width: 100%;
        height: 400px;
		filter: hue-rotate(90deg);
    }
</style>

Notes:

  • Also try saturate at over 100% for more vibrant color, or combine with brightness and contrast to tweak the colors further.

Visit Mozilla's filter function page for more functions.


Advanced Design

Visit our Github Wikiocity Styles Page for more information on our primary design for Wikiocity. You are free to modify the design as you wish within the bounds of our design license. We'd love to see what you can do with it, so please share in the forum!


Remove Points of Interest and other Content