Giter Site home page Giter Site logo

droppin's Introduction

dropPin

A quick and simple tool to drop markers onto static images avoiding the use of annoying area maps. Store pin co-ordinates and draw them back onto the image with css and jQuery. Allow users to mark where they live on a map without using Google maps(or similar). However you choose to use it, have fun....
View on Github pages: http://duncanheron.github.com/dropPin/

HTML

<div id="map"></div>

Basic use - dropping a pin - default user event is .on click

$('#map').dropPin({
    fixedHeight:495,
    fixedWidth:700
});

Example 1 - click to add a pin

#include the js and css files
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script>
<link rel="stylesheet" href="/js/dropPin/dropPin.css" type="text/css" />
<script type="text/javascript" src="/js/dropPin/dropPin.js"></script>

#add the script on document ready
<script type="text/javascript">
    $(document).ready(function() {
	
    $('#map').dropPin({
        fixedHeight:495,
        fixedWidth:700,
        backgroundImage: '/images/{some-image.jpg}',
        pin: '/image/{custom-pin-graphic.png}'
    });
});
  
</script>

#add the html div to insert the image map
<div id="map"></div>

Example 2 - show a single stored pin

#include the js and css files
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script>
<link rel="stylesheet" href="/js/dropPin/dropPin.css" type="text/css" />
<script type="text/javascript" src="/js/dropPin/dropPin.js"></script>

#add the script on document ready
<script type="text/javascript">
$(document).ready(function() {
	
    $('#map').dropPin('showPin',{
        fixedHeight:495,
        fixedWidth:700,
        backgroundImage: '/images/{some-image.jpg}',
        pin: '/image/{custom-pin-graphic.png}'
        pinX: <?php echo {pinXcoord} ?>,
        pinY: <?php echo {pinYcoord} ?>
        });
});
  
</script>

#add the html div to insert the image map
<div id="map"></div>

Example 3 - show multiple pins from dataset

#include the js and css files
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script>
<link rel="stylesheet" href="/js/dropPin/dropPin.css" type="text/css" />
<script type="text/javascript" src="/js/dropPin/dropPin.js"></script>

#get the data for the pins(maybe from a database?)
<?php
    $mapItems = array(
    array(
        "id" => 1,
        "title" => "map pin 1",
        "xcoord" => "420",
        "ycoord" => "120"
        ),
    array(
        "id" => 2,
        "title" => "map pin 2",
        "xcoord" => "429",
        "ycoord" => "129"
        )
    );
?>
#set up an array of pin data for plugin use
<?php
    foreach($mapItems as $map)
    {
        $mapPins[] = array(
            "id" => $map['id'],
            "title" => $map['title'],    				
            "xcoord" => $map['xcoord'],
            "ycoord" => $map['ycoord']
        );
    }
?>

#add the script on document ready and pass through the pin dataset
<script type="text/javascript">
$(document).ready(function() {
	
    $('#map').dropPin('showPins',{
        fixedHeight:495,
        fixedWidth:700,
        cursor: 'pointer',
        pinclass: 'qtipinfo',
        pinDataSet: <?php echo '{"markers": '.json_encode($mapPins).'}' ;?>
    });
});
  
</script>

#add the html div to insert the image map
<div id="map"></div>

Options

fixedHeight: 500,
fixedWidth: 500,
dropPinPath: '/js/dropPin/',
pin: '/js/dropPin/defaultpin.png',
backgroundImage: '',
backgroundColor: '#9999CC',
xoffset : 10,
yoffset : 30, //need to change this to work out icon heigh/width then subtract margin from it
cursor: 'crosshair',
pinclass: '',
userevent: 'click',
hiddenXid: '#xcoord', //used for saving to db via hidden form field
hiddenYid: '#ycoord', //used for saving to db via hidden form field
pinX: false, //set to value if you pass pin co-ords to overirde click binding to position
pinY: false, //set to value if you pass pin co-ords to overirde click binding to position
pinDataSet: '' //array of pin coordinates for front end render

Author

Duncan Heron

droppin's People

Contributors

duncanheron avatar

Watchers

Swapneel avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.