New Online Map Editor [Created by Adwnt]

[adwnt]

UPDATE: You can now export maps as SVG or PNG images with a legend and scale, which is a major enhancement. Very exciting!

Hey all!

My name is Andrew, and I'm new to this forum. I hope you give me some leeway with my first real post, but I'm always accepting of criticism.

Anyway, I'm a big fan of plain-and-simple street maps, and I've toiled away for the past couple of days creating an online mapping tool. I'm actually quite proud of it.

It basically is just an online map creator where you can create a map akin to the basic Google Maps vector-based maps. Within the creator, you can build just about whatever you want, save it on your computer for later use, and even share maps with others using the good-old system of sharing text files. You can theoretically create a map of any size you want, however detail would have to suffer if you went too large and complex.

I'll type up a sort of press release here for your perusal.

Main Features:

• EXPORT maps as PNG or SVG, with legend and scale
• Draw
  
  1. Rivers
  2. Streams
  3. Creeks
  4. Avenues
  5. Roads
  6. Streets
  7. Highways
  8. Ramps
  9. Rail
  10. Sidewalks
  11. Land
  12. Water
  13. Parks
  14. Pavement
  15. Buildings
• Add labels
• Endless canvas
• Zoom and pan while working
• Max Zoom: 100px:60ft*
• Min Zoom: 100px:12000ft*
• Enable/Disable grid
• Change color schemes (custom or from presets)
• Automatically layer components if desired
• Undo actions
• Delete elements
• Dynamic scale bar
• Customize height/width of view to fit your screen
• Explore mode to view with a legend
• Easy clearing to restart
• Download config to save on your computer for later
• Load saved config easily
• Easily share maps with others
• And whatever else I forgot...

*Most elements should be close to this default scale.

Just be sure to read all of the instructions on the webpage to gain the most understanding of the app. Controls might be a little awkward at first, but you'll get used to it pretty quickly.

Demo
Here's how a map looks with the "Google Maps" color scheme and its corresponding config file.

Screenshot (122).png
demo_map.txt

The map isn't very big, I just wanted a quick demo, but you can add to it and explore it if you copy the config text and load it in the application. Without buildings, it somewhere around 1/8th of the maximum theoretical number of elements. I have yet to stress test it though. I've optimized the creator and believe it should be able to hold almost any size you throw at it, only bound by the efficiency of AngularJS repeating and the SVG renderer.

Future Plans
I hope to add some new features that will improve the app as a whole. There's a list on the website of what I hope to get to eventually.

Additionally, because sharing is so easy, I would eventually like to hold a contest and see what you guys could do with it. I sincerely hope you all spend some time on the tool, post some of the things you make, and have a good time with it.

Closing Notes
PLEASE USE GOOGLE CHROME


Give It A Try At:
http://andrew-gnott.com/#!/mapping

Have fun!

- Andrew

[Carnifex]

Can you make a vectorized image?

[adwnt]

The image with the viewer is a vector image. I assume you mean exporting it, correct? If so, I haven't been able to do that yet. It's on the top of my to do list.

Existing SVG exporting JavaScript libraries don't work well with AngularJS. I'll have to build my own to get the job done, which could take a few days.

Until then we'll just have to view maps through the site.

EDIT 1: I found a way to allow for virtually infinite maps, I think. If not infinite, it's at least much larger than it is now. I'll be implementing it soon. Stay tuned!

EDIT 2: Added the optimization and now should allow for many more elements to be created at the expense of the most recently created element being placed in front of all other elements until a new element is created. Then it is layered correctly.

EDIT 3: Now you can export as a Scalable Vector Graphic (SVG) or a custom scaled PNG. Hope those interested enjoy this new feature!

[adwnt]

I do realize I'm double posting, but I do have significant improvements that I wan't to make known...

I've been working on improving the capabilities of the online map editor, and have the following features implemented:

- Exporting as both PNG and SVG
--- You set the view to exactly what you want to save, and then click export. The tool will generate both an SVG and custom-scaled PNG image for you to download. This is great for getting quick pictures for the forum or your computer.
- Online saving
--- You can now save maps online using local storage. They will be deleted if you clear your browser data, but until then you can save and load straight from the tool. I recommend backing up your map to a file on your computer every so often just in case.
- Extended the zooming functionality
--- You can now zoom out even further to get more of your map on the screen. This allows you to set yourself up for great pictures or getting an all-encompassing view of your map.
- Increased the efficiency
--- I optimized the editor such that it is no longer limited by AngularJS' element bindings. It now is limited by the quickness of the for loop that layers the objects and HTML/SVG rendering. I still don't know the limits, and it will most definitely slow down as you add more, but I don't imagine you will experience a slow-down until you've created a lot, lot, lot of elements.
- Added a clean up button
--- Part of the optimization method that clears empty lines. Run this every once in a while to keep your map free of these little guys.
- Label Rotation
--- You can now place labels at an angle. This is simple a visual tweak, but it makes the maps feel much more polished.

As you can see I've been hard at work on this. I think next will be an underground metro view with different colored lines. We'll see how it goes though.

Please take a look at what I've done and tell me what you think!