mapbox_framer_add_infobox_with_place_name.coffee

# Add a marker for a place 
addInfobox = ( coordinates, design_component ) ->
	currentPlaceInfobox = design_component.copy()
	currentPlaceInfobox.opacity = 0
	current_place_name = getPlaceName( coordinates ).then( ( place ) ->
		currentPlaceInfobox.subLayersByName('place')[0].text = place.text
	)

	do ->
		infobox = addMarker( coordinates, currentPlaceInfobox )
		
		# Give marker a little vertical offset to make it land on top of the point	
		infobox.setOffset([0, -50])

		originalMarkerSize = design_component.height
		
		# Setting initial height and opacity to zero for animation		
		infobox.element.height = 0
		infobox.element.opacity = 0
		
		infobox.element.animate
			height: originalMarkerSize
			opacity: 1
			options:
				time: 1
				curve: Spring
		return infobox

# Let's call the function we created once we click on the marker
initialMarker.element.on Events.Click, ->
	
	# Get the current marker's coordinates	
	coordinates = initialMarker.getLngLat()
	currentCoordinates = [coordinates.lat, coordinates.lng]
	
	# Create the infobox 	
	infobox = addInfobox( currentCoordinates, place_infobox )
	
	# Change index of the infobox to be on the top	
	infobox.element.index = 2