About this website

Here On The Map demonstrates some of the major features of the EasyCoder scripting language, but in a fun way that anyone can use, not just programmers.

If you are interested in how the site is built you can visit the developer pages. And if you want to contact the author you can do so by email to info@hereonthemap.com.

Where the idea came from

While writing EasyCoder I wanted to build a demo site that uses as many features as possible, including Google Maps and CKEditor (the rich text editor I used in a couple of recent projects). Then one day someone emailed me to ask if I knew of a particular shop, its name and where it was. I sent them the information but later thought "Wouldn't it be cool if I could send them a URL that takes them straight to the location on the map and also shows them a page of information about the place?". Yes, of course in a general sense that's what Google Maps are for, but it gave me some ideas for a different kind of experience.

One thing led to another and the result was Here On The Map. So here's how to use it.

Here On The Map

Everywhere we go, every place we visit, there's a story to be told, some more interesting than others. This website is somewhere you can place these stories, where you and others can revisit them.

On the Home page is a map. The first time you see it, most of the world will be in view. You can zoom in and out of the map using the mouse wheel, or on mobile you can pinch-zoom. You can drag the map up, down and side to side.

On the map you'll see some yellow pins. Construction of this site only began at the start of February 2019 so there are not yet many pins. The first ones added were all located in Europe; in the UK and Italy. On a PC, when you hover over a pin you'll see a label, and when you click the pin a display panel opens below the map, containing a story; a document written by the user who added the pin. Here's what a typical story looks like:

At the top is the title of the pin and under this the name of its author. You can choose to see only pins from that author, by clicking the name. The map will update to match your choice.

Under this is a line containing a number of tags. You can choose to see only pins that have a given tag, by clicking the tag name, Again, the map will update to match your choice.

When you select an author or a tag, an extra line appears below the map giving the name of the author/tag and a link to click that returns you to viewing all pins.

Adding your own pins

To add your own pins you first have to register. Click the Login/Register link, then click the Register button and fill in your details. We only ask for your email address and a name we can call you by. This name will be visible to other users, as in the example above, but your email address will never be shown to anyone except yourself.

To add a pin, zoom the map to an appropriate level then click at the position you want the pin. A dialog pops up asking you for a title for your pin, then the new pin will appear on the map, colored green to show you that it belongs to you. All the other pins remain yellow.

Adding a story

When you click a pin you'll see its story below the map. If you click one of your own pins, the same information will appear but in an editing panel where you can make changes to it. The panel looks like this:

As you can see, the editor is almost a full word processor, giving you plenty of scope for creative writing. At the top is a row of buttons, which do the following:

 Delete the current pin, along with its story

Run the File Manager

Save the contents of the editor for this pin

View the page (as if you were not logged in). There will be a link to return to the editor.

When you use the editor to write a story you will want to add photos. For an image to be visible to anyone except yourself it must be uploaded somewhere, and its URL (the address of where it is) will be used in the editor. The File Manager takes care of the uploading and storage. This is what it looks like:

As you might expect, you can navigate up and down through your folders, add new folders, upload images and delete them. The folders and files you see are on an area of our website that only you have access to, keyed to your user ID. Each user has their own private area.

To upload an image, click the Browse button and look for the file on your computer. Then click Upload and wait while it copies to our website. The name will appear in the list of files for the current folder. When you click the name you'll see the image:

Here you can close the panel, delete the file or show its URL:

Type Control-C or right-click to copy the highlighted text. Now back out by clicking cancel or Close until you're back at the editor. Add a new image to your document by clicking the icon:

This icon add a new image to your document

The editor pops up a panel in which you can provide all the details of the image, including the URL you copied from the File Manager. You can include any image for which you have the URL, including those from other websites. There's not space here to explain it all in detail, the best thing is to just experiment and see what happens.

Your stories can be as long as you like, with photos, video clips and links to other pages, giving you plenty of scope for creative expression.

Have fun!

Go to the Home page