FLA-SHOP.com - Interactive Maps with Greater Impact!

HTML5 UK Postcode Map Locator 2.3

We introduce a brand new map of UK Postcode powered by JavaScript. The map is suitable for displaying on any device including iPhone, iPad and obviously on all major desktop browsers. The interactive map shows clickable areas* which you can assign a landing page URL with. Easily adjustable colors, links and popup balloons and other settings allow you to tune the map view to your needs.
* The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map

HTML5 interactive map is perfect for any business to highlight local offices, dealers etc.

The map is powered by the Raphael JavaScript library providing the work in the following browsers: Chrome, Firefox, Safari, Opera, IE8-IE12, Microsoft Edge.

Table of Contents

Features

  • Suitable for real-estate, dealer maps, branch offices location and any geographical-related information
  • Responsive/static size of interactive map
  • Popup window for additional information adding
  • Works with any mobile devices including iPhone and iPad
  • Wide customizing capabilities

Preview

What's new

Version 2.3
Fix behavior in Microsoft Edge (rendering bugs). Some minor bugfixes and optimizations.

General Settings

The HTML5 Locator Map is configured through 2 files: settings.js and map.css.

All adjustments and customizations should be made in the JS file. We advise you to use free Notepad++. Certainly, you can use any other HTML and plaintext editors as well.

The configurations and customizations can be made on your local computer. After customization you have to upload the edited files on your web server.

Customizing the file "settings.js"
The file settings.js you can define the properties of maps: the color of the regions, borders, 2-letter codes, links and information for popup ballons.

The options are described below:
Parameter name Values Description
mapWidth 400 Map width in pixels. If 0 - map width will be 100% (responsive mode)
mapHeight 450 Map height. If width = 0 - will be ignored
shadowAllow true/false Whether draw shadow for active area or not
shadowWidth 2 Shadow width
shadowOpacity 0.3 Shadow opacity
shadowColor "black" Shadow color. Can be in #rgb format
shadowX 1 Shadow offset by X coordinate
shadowY 2 Shadow offset by Y coordinate
iPhoneLink true/false If 'true' - the URL is opened immediately. Useful if you don't need to display a popup window.
If 'false' - the first tap displays a popup window for the selected area. The second tap opens the URL.
isNewWindow true/false Whether to open new links in new window or in current
zoomEnable true/false Whether zoom capabilities enabled or not
zoomEnableControls true/false Whether zoom controls are available or not
zoomMax 2
zoomStep 0.2 This setting is used by scroll zooming and zoomIn and zoomOut methods
borderWidth 1 Border width for regions
borderColor Hex value The color of region's borders
borderColorOver Hex value Color of the border for active region
nameColor Hex value Name colors (used with short name)
nameColorOver Hex value Name colors when state is hovered (used with short name)
nameFontSize 11px Short names font size
nameFontWeight bold/normal Short name boldness. Can be "normal" or "bold"
nameStroke true/false Whether short names should have stroke or note
tooltipOnHighlightIn true/false Whether show tooltip on map.stateHighlightIn call or not. If true - map will be focused on highlighted state.
overDelay secs animation duration in milliseconds
Region settings
id number The id of a region. Must not be changed
name text The name of a region
shortname text The abbreviated name of a region
link text The landing page URL. May include JS code
comment HTML formatted text The text of the popup window. May include HTML formatting
image text The file name of the image to display in a popup
color_map Hex value The color of a region. Default color #7798BA
color_map_over Hex value The color of a region when the mouse cursor is over it. Default color #366CA3


Example
id: 1,
name: "Alabama",
shortname: "AL",
link: "alabama_page.html",
comment: "Name Surname<br>Business Development Manager<br>Phone: (000) 123-4567",
image: "photo.jpg",
color_map: "#7798BA", 
color_map_over: "#366CA3"

Install HTML5 Map

In order to install the map on your site, add the following code to the HTML source of the page: 
<!-- start Fla-shop.com HTML5 Map -->
	<div id='map-container'></div>
	<link href="map.css" rel="stylesheet">
	<script src="raphael-min.js"></script>
	<script src="settings.js"></script>
	<script src="map.js"></script>
	<script>
	var map = new FlaMap(map_cfg);
	map.drawOnDomReady('map-container');
	</script>
<!-- end HTML5 Map -->
Note that you should upload all files to your server first.
Make sure you have specified the full path to the files in the code including subfolders. 
<!-- start Fla-shop.com HTML5 Map -->
	<div id='map-container'></div>
	<link href="/directory/map.css" rel="stylesheet">
	<script src="/directory/raphael-min.js"></script>
	<script src="/directory/settings.js"></script>
	<script src="/directory/map.js"></script>
	<script>
	var map = new FlaMap(map_cfg);
	map.drawOnDomReady('map-container');
	</script>
<!-- end HTML5 Map -->

API specification

Version 2.0+ use new API with improved functions, you can find API description by following this link

Fla-shop.com Licensing Information

SINGLE SITE LICENSE
$69
BUY NOW!
Thank you for using our product. Please feel free to contact us with any questions regarding our product.

More maps and Information on website Fla-shop.com