Streets and Heroes

    Streets and Heroes

    Hello. I want to share with you my small project, the idea of ​​which occurred to me on the eve of the May 9th celebration. Then I didn’t have time to implement my plan, so it was decided to try to manage to do everything by June 22nd. And literally finished it tonight. The idea was to show on the map of Moscow the streets named after the heroes of the Great Patriotic War.

    We all walk and drive along the streets, whose names have their historical justification, but few of us think about this. So, in the process of collecting data, I rediscovered many streets that I didn’t even realize that they were named after the heroes. I suggest you look at familiar places, learn new things for yourself, and pay tribute to the people who sacrificed so many for your sake: Streets and Heroes .

    Technical details


    Well, since we are in a habr, I’ll tell you a little about how everything is arranged, especially since there are interesting solutions. The project is based on data from OSM and Wikipedia. To draw the map, leaflet.js is used with a number of plugins. For search, the modified leaflet-fusesearch plugin is used (the original works only with markers), a very cool thing, it can search several record fields at once. You can watch the project on github: Streets-of-Valor-and-Victory .

    Street lines were pulled from OSM, and depending on the type of line they were assigned a category so that they could then synchronize their rendering with the used map style. The fact is that in most cases people do not bother and make lines of a fixed thickness regardless of the zoom, it looks pretty ugly. The solution looks something like this:

    	"11": {
    		"motorway": {
    			"color": "#FF0000",
    			"weight": 3.6,
    			"opacity": 1,
    			"fill": false,
    			"lineCap": "butt",
    			"lineJoin": "round"
    		},
    		"mainroad": {
    			"color": "#FF0000",
    			"weight": 2,
    			"opacity": 1,
    			"fill": false,
    			"lineCap": "butt",
    			"lineJoin": "round"
    		},
    		"minorroad": {
    			"color": "#FF0000",
    			"weight": 0.4,
    			"opacity": 1,
    			"fill": false,
    			"lineCap": "butt",
    			"lineJoin": "round"
    		},
    		"service": {
    			"color": "#FF0000",
    			"weight": 0.3,
    			"opacity": 1,
    			"fill": false,
    			"lineCap": "butt",
    			"lineJoin": "round"
    		},
    		"noauto": {
    			"color": "#FF0000",
    			"weight": 0.3,
    			"opacity": 1,
    			"fill": false,
    			"lineCap": "butt",
    			"lineJoin": "round"
    		}
    	}
    

    We need to paint styles for each category for all zooms, while orienting ourselves on the osm-bright mapostyle . This allowed the lines to be translucent so that street names can be seen. There is a small problem when the parts of the composite street overlap each other, but this is all solved by cunning data manipulations in postgis, and will be solved the next time the data is updated. Yes, about the update. Send me the streets that you did not find on the map or in the list, I will be very grateful!

    Tiles. Now I use satellite tiles, and then we'll see how things will be.

    In principle, that's all. If you have any questions, ask. If someone wants to do something similar for another city - write, I will help. I hope the map will be interesting to you, and do not forget to share it with your friends!

    PS send errors and typos in PM, there was no time for a detailed proofreading, so everything can be

    Also popular now: